first commit
This commit is contained in:
Inshal
@@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const refForm = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm
|
||||
ref="refForm"
|
||||
@submit.prevent="() => {}"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="john@email.com"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
@click="refForm?.validate()"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,85 @@
|
||||
<script setup>
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
|
||||
const name = ref('')
|
||||
const email = ref('')
|
||||
const refForm = ref()
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const isPasswordVisible = ref(false)
|
||||
const isConfirmPasswordVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm
|
||||
ref="refForm"
|
||||
@submit.prevent="() => {}"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="name"
|
||||
label="Name"
|
||||
placeholder="Your Name"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="Your Email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="password"
|
||||
label="Password"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
placeholder="Enter Password"
|
||||
:rules="[requiredValidator, passwordValidator]"
|
||||
autocomplete="on"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="confirmPassword"
|
||||
label="Confirm Password"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
placeholder="Confirm Password"
|
||||
:append-inner-icon="confirmPassword ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
:rules="[requiredValidator, confirmedValidator(confirmPassword, password)]"
|
||||
autocomplete="on"
|
||||
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
@click="refForm?.validate()"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,183 @@
|
||||
<script setup>
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
|
||||
const requiredField = ref('')
|
||||
const numberBetween10to20 = ref('')
|
||||
const onlyConsistNumber = ref('')
|
||||
const matchRegularEx = ref('')
|
||||
const onlyAlphabeticCharacters = ref('')
|
||||
const specifiedLength = ref('')
|
||||
const password = ref('')
|
||||
const digits = ref('')
|
||||
const repeatPassword = ref('')
|
||||
const onlyAlphabeticNumbersDashesUnderscores = ref('')
|
||||
const email = ref('')
|
||||
const validURL = ref('')
|
||||
const refForm = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm
|
||||
ref="refForm"
|
||||
@submit.prevent
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="requiredField"
|
||||
persistent-placeholder
|
||||
placeholder="This field is required"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="numberBetween10to20"
|
||||
persistent-placeholder
|
||||
placeholder="Enter Number between 10 & 20"
|
||||
:rules="[requiredValidator, betweenValidator(numberBetween10to20, 10, 20)]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="onlyConsistNumber"
|
||||
persistent-placeholder
|
||||
placeholder="Must only consist of numbers"
|
||||
:rules="[requiredValidator, integerValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="matchRegularEx"
|
||||
persistent-placeholder
|
||||
placeholder="Must match the specified regular expression : ^([0-9]+)$ - numbers only"
|
||||
:rules="[requiredValidator, regexValidator(matchRegularEx, '^([0-9]+)$')]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="onlyAlphabeticCharacters"
|
||||
persistent-placeholder
|
||||
placeholder="Only alphabetic characters"
|
||||
:rules="[requiredValidator, alphaValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="specifiedLength"
|
||||
persistent-placeholder
|
||||
placeholder="Length should not be less than the specified length : 3"
|
||||
:rules="[requiredValidator, lengthValidator(specifiedLength, 3)]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="password"
|
||||
persistent-placeholder
|
||||
placeholder="Password Input Field"
|
||||
type="password"
|
||||
:rules="[requiredValidator, passwordValidator]"
|
||||
autocomplete="on"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="digits"
|
||||
persistent-placeholder
|
||||
placeholder="The digits field must be numeric and exactly contain 3 digits"
|
||||
:rules="[requiredValidator, lengthValidator(digits, 3), integerValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="repeatPassword"
|
||||
persistent-placeholder
|
||||
placeholder="Repeat password must match"
|
||||
type="password"
|
||||
:rules="[requiredValidator, confirmedValidator(repeatPassword, password)]"
|
||||
autocomplete="on"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="onlyAlphabeticNumbersDashesUnderscores"
|
||||
persistent-placeholder
|
||||
placeholder="Only alphabetic characters, numbers, dashes or underscores"
|
||||
:rules="[requiredValidator, alphaDashValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
persistent-placeholder
|
||||
placeholder="Must be a valid email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="validURL"
|
||||
persistent-placeholder
|
||||
placeholder="Must be a valid url"
|
||||
:rules="[requiredValidator, urlValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
@click="refForm?.validate()"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,641 @@
|
||||
export const simpleFormValidation = { ts: `<script lang="ts" setup>
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
|
||||
const refForm = ref<VForm>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm
|
||||
ref="refForm"
|
||||
@submit.prevent="() => {}"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="john@email.com"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
@click="refForm?.validate()"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
|
||||
const firstName = ref('')
|
||||
const email = ref('')
|
||||
const refForm = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm
|
||||
ref="refForm"
|
||||
@submit.prevent="() => {}"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="john@email.com"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
@click="refForm?.validate()"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const validatingMultipleRules = { ts: `<script lang="ts" setup>
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
|
||||
const name = ref('')
|
||||
const email = ref('')
|
||||
const refForm = ref<VForm>()
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const isPasswordVisible = ref(false)
|
||||
const isConfirmPasswordVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm
|
||||
ref="refForm"
|
||||
@submit.prevent="() => {}"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="name"
|
||||
label="Name"
|
||||
placeholder="Your Name"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="Your Email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="password"
|
||||
label="Password"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
placeholder="Enter Password"
|
||||
:rules="[requiredValidator, passwordValidator]"
|
||||
autocomplete="on"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="confirmPassword"
|
||||
label="Confirm Password"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
placeholder="Confirm Password"
|
||||
:append-inner-icon="confirmPassword ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
:rules="[requiredValidator, confirmedValidator(confirmPassword, password)]"
|
||||
autocomplete="on"
|
||||
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
@click="refForm?.validate()"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
|
||||
const name = ref('')
|
||||
const email = ref('')
|
||||
const refForm = ref()
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const isPasswordVisible = ref(false)
|
||||
const isConfirmPasswordVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm
|
||||
ref="refForm"
|
||||
@submit.prevent="() => {}"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="name"
|
||||
label="Name"
|
||||
placeholder="Your Name"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="Email"
|
||||
placeholder="Your Email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="password"
|
||||
label="Password"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
placeholder="Enter Password"
|
||||
:rules="[requiredValidator, passwordValidator]"
|
||||
autocomplete="on"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="confirmPassword"
|
||||
label="Confirm Password"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
placeholder="Confirm Password"
|
||||
:append-inner-icon="confirmPassword ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
:rules="[requiredValidator, confirmedValidator(confirmPassword, password)]"
|
||||
autocomplete="on"
|
||||
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
@click="refForm?.validate()"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
` }
|
||||
|
||||
export const validationTypes = { ts: `<script lang="ts" setup>
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
|
||||
const requiredField = ref('')
|
||||
const numberBetween10to20 = ref('')
|
||||
const onlyConsistNumber = ref('')
|
||||
const matchRegularEx = ref('')
|
||||
const onlyAlphabeticCharacters = ref('')
|
||||
const specifiedLength = ref('')
|
||||
const password = ref('')
|
||||
const digits = ref('')
|
||||
const repeatPassword = ref('')
|
||||
const onlyAlphabeticNumbersDashesUnderscores = ref('')
|
||||
const email = ref('')
|
||||
const validURL = ref('')
|
||||
const refForm = ref<VForm>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm
|
||||
ref="refForm"
|
||||
@submit.prevent
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="requiredField"
|
||||
persistent-placeholder
|
||||
placeholder="This field is required"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="numberBetween10to20"
|
||||
persistent-placeholder
|
||||
placeholder="Enter Number between 10 & 20"
|
||||
:rules="[requiredValidator, betweenValidator(numberBetween10to20, 10, 20)]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="onlyConsistNumber"
|
||||
persistent-placeholder
|
||||
placeholder="Must only consist of numbers"
|
||||
:rules="[requiredValidator, integerValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="matchRegularEx"
|
||||
persistent-placeholder
|
||||
placeholder="Must match the specified regular expression : ^([0-9]+)$ - numbers only"
|
||||
:rules="[requiredValidator, regexValidator(matchRegularEx, '^([0-9]+)$')]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="onlyAlphabeticCharacters"
|
||||
persistent-placeholder
|
||||
placeholder="Only alphabetic characters"
|
||||
:rules="[requiredValidator, alphaValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="specifiedLength"
|
||||
persistent-placeholder
|
||||
placeholder="Length should not be less than the specified length : 3"
|
||||
:rules="[requiredValidator, lengthValidator(specifiedLength, 3)]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="password"
|
||||
persistent-placeholder
|
||||
placeholder="Password Input Field"
|
||||
type="password"
|
||||
:rules="[requiredValidator, passwordValidator]"
|
||||
autocomplete="on"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="digits"
|
||||
persistent-placeholder
|
||||
placeholder="The digits field must be numeric and exactly contain 3 digits"
|
||||
:rules="[requiredValidator, lengthValidator(digits, 3), integerValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="repeatPassword"
|
||||
persistent-placeholder
|
||||
placeholder="Repeat password must match"
|
||||
type="password"
|
||||
:rules="[requiredValidator, confirmedValidator(repeatPassword, password)]"
|
||||
autocomplete="on"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="onlyAlphabeticNumbersDashesUnderscores"
|
||||
persistent-placeholder
|
||||
placeholder="Only alphabetic characters, numbers, dashes or underscores"
|
||||
:rules="[requiredValidator, alphaDashValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
persistent-placeholder
|
||||
placeholder="Must be a valid email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="validURL"
|
||||
persistent-placeholder
|
||||
placeholder="Must be a valid url"
|
||||
:rules="[requiredValidator, urlValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
@click="refForm?.validate()"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
`, js: `<script setup>
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
|
||||
const requiredField = ref('')
|
||||
const numberBetween10to20 = ref('')
|
||||
const onlyConsistNumber = ref('')
|
||||
const matchRegularEx = ref('')
|
||||
const onlyAlphabeticCharacters = ref('')
|
||||
const specifiedLength = ref('')
|
||||
const password = ref('')
|
||||
const digits = ref('')
|
||||
const repeatPassword = ref('')
|
||||
const onlyAlphabeticNumbersDashesUnderscores = ref('')
|
||||
const email = ref('')
|
||||
const validURL = ref('')
|
||||
const refForm = ref()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm
|
||||
ref="refForm"
|
||||
@submit.prevent
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="requiredField"
|
||||
persistent-placeholder
|
||||
placeholder="This field is required"
|
||||
:rules="[requiredValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="numberBetween10to20"
|
||||
persistent-placeholder
|
||||
placeholder="Enter Number between 10 & 20"
|
||||
:rules="[requiredValidator, betweenValidator(numberBetween10to20, 10, 20)]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="onlyConsistNumber"
|
||||
persistent-placeholder
|
||||
placeholder="Must only consist of numbers"
|
||||
:rules="[requiredValidator, integerValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="matchRegularEx"
|
||||
persistent-placeholder
|
||||
placeholder="Must match the specified regular expression : ^([0-9]+)$ - numbers only"
|
||||
:rules="[requiredValidator, regexValidator(matchRegularEx, '^([0-9]+)$')]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="onlyAlphabeticCharacters"
|
||||
persistent-placeholder
|
||||
placeholder="Only alphabetic characters"
|
||||
:rules="[requiredValidator, alphaValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="specifiedLength"
|
||||
persistent-placeholder
|
||||
placeholder="Length should not be less than the specified length : 3"
|
||||
:rules="[requiredValidator, lengthValidator(specifiedLength, 3)]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="password"
|
||||
persistent-placeholder
|
||||
placeholder="Password Input Field"
|
||||
type="password"
|
||||
:rules="[requiredValidator, passwordValidator]"
|
||||
autocomplete="on"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="digits"
|
||||
persistent-placeholder
|
||||
placeholder="The digits field must be numeric and exactly contain 3 digits"
|
||||
:rules="[requiredValidator, lengthValidator(digits, 3), integerValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="repeatPassword"
|
||||
persistent-placeholder
|
||||
placeholder="Repeat password must match"
|
||||
type="password"
|
||||
:rules="[requiredValidator, confirmedValidator(repeatPassword, password)]"
|
||||
autocomplete="on"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="onlyAlphabeticNumbersDashesUnderscores"
|
||||
persistent-placeholder
|
||||
placeholder="Only alphabetic characters, numbers, dashes or underscores"
|
||||
:rules="[requiredValidator, alphaDashValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
persistent-placeholder
|
||||
placeholder="Must be a valid email"
|
||||
:rules="[requiredValidator, emailValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="validURL"
|
||||
persistent-placeholder
|
||||
placeholder="Must be a valid url"
|
||||
:rules="[requiredValidator, urlValidator]"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
type="submit"
|
||||
@click="refForm?.validate()"
|
||||
>
|
||||
Submit
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
` }
|
||||
|
||||
Reference in New Issue
Block a user