element-ui form verification? encyclopedia

Directory

• • 1. Verification of all form items
  • 2. Verify the specified fields
  • 3. Custom function verification form
  • 4. Verification of multiple input boxes in one line

element-ui official website

The rules for element-ui form verification are as follows:

<property name>: [
{<!-- -->
required: true, // Whether it is required (if there is a label, a red dot will be displayed in the upper left corner, otherwise the required sign will not be displayed), optional.
type: 'date', // Limit the input data type, optional.
min: 3, // When the input is a numerical value, limit the minimum input value, optional.
max: 5, // When the input is a numerical value, limit the maximum input value, optional.
pattern: /^\d + \.\d + \.\d + $/,// Regular expression, optional.
message: "Please use x.x.x format numbering", // Prompt message when error occurs, required.
trigger: ['change', 'blur']// Event that triggers verification, required. Use a string to listen to a single event, and use an array to listen to multiple events.
},
// ...
]

1. Verification of all form items

<template>
<form ref="formRef" :model="form" :rules="rules" hide-required-asterisk class="base-form" :label-width="120">
<el-form-item label="coding:" prop="code">
<el-input v-model="form.code" placeholder="Please enter the code" clearable/>
</el-form-item>
<el-form-item label="address" prop="address">
<el-select v-model="form.address" placeholder="Please select a city" clearable>
<el-option label="Shanghai" value="shanghai" />
<el-option label="Beijing" value="beijing" />
</el-select>
    </el-form-item>
<el-form-item label="Month:" prop="moth">
<el-input v-model="form.moth" placeholder="Please enter the month" clearable/>
</el-form-item>
<el-form-item label="date" prop="date">
<el-date-picker v-model="form.date" type="date" placeholder="Please select a date" clearable/>
</el-form-item>
<el-form-item label="Members:" prop="members">
<el-checkbox-group v-model="form.members">
        <el-checkbox label="No. 1" name="members" />
        <el-checkbox label="No. 2" name="members" />
        <el-checkbox label="No. 3" name="members" />
</el-checkbox-group>
    </el-form-item>
<el-form-item label="Mobile phone number:" prop="phone">
<el-input v-model="form.phone" placeholder="Please enter your phone number" clearable/>
</el-form-item>
<el-form-item>
<el-button @click="submit(formRef)">Save</el-button>
    </el-form-item>
</form>
</template>
<script setup lang="ts">
import {<!-- --> ref, reactive } from 'vue'
import type {<!-- --> FormInstance, FormRules } from 'element-plus'

const formRef = ref(null)

interface RuleForm {<!-- -->
    code: string
   address: string
    moth: string | number
date: date | string
members: string[]
phone: string
}

const form = reactive<RuleForm>({<!-- -->
code: '',
address: '',
    moth: '',
date: '',
members: []
phone: '',
})

// form validation
const rules = reactive<FormRules<RuleForm>>({<!-- -->
// Defocus trigger verification
code: [{<!-- --> required: true, message: 'Please enter the code', trigger: 'blur' }],
// Trigger verification when value changes
address: [{<!-- --> required: true, message: 'Please select a city', trigger: 'change' }],
// Contains maximum and minimum values
moth: [
{<!-- --> required: true, message: 'Please enter the month', trigger: 'blur' },
{<!-- --> min: 1, max: 12, message: 'Please enter one from 1 to 12 months', trigger: 'blur' },
],
// Typed check - type is date
date: [{<!-- --> type: 'date', required: true, message: 'Please enter the date', trigger: 'change' }],
// Typed verification - type is array
members: [{<!-- --> type: 'array', required: true, message: 'Please select a member', trigger: 'change' }],
// Validation with regular expressions
    phone: [
    {<!-- --> required: true, message: 'Please enter your mobile phone number', trigger: 'blur' },
    {<!-- --> pattern: /^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9])[0 -9]{8}$/, message: 'Please enter the correct mobile phone number', trigger: 'blur' },
    ],
})

// Submit - validate the entire form
const submit = async (formEl: FormInstance | undefined) => {<!-- -->
if (!formEl) return
await formEl.validate((valid, fields) => {<!-- -->
if (valid) {<!-- -->
console.log('submit!')
} else {<!-- -->
console.log('error submit!', fields)
}
})
}
</script>

2. Verify specified fields

<template>
<form ref="formRef" class="base-form" :model="form" :label-width="120" :rules="rules" hide-required-asterisk>
<el-form-item label="coding:" prop="code">
<el-input v-model="form.code" autocomplete="off" clearable @input="validateSelect" @keyup.enter="validateSelect"/>
</el-form-item>
</form>
</template>
<script setup lang="ts">
import {<!-- --> ref } from 'vue'
import type {<!-- --> FormInstance, FormRules } from 'element-plus'

const formRef = ref(null)

interface RuleForm {<!-- -->
    code: string
}

const form = ref<RuleForm>({<!-- -->
    code: '',
})

// form validation
const rules = reactive<FormRules<RuleForm>>({<!-- -->
    code: [{<!-- --> required: true, message: 'Please fill in the code', trigger: 'blur' }],,
})

//Verify the specified field
const validateSelect = () => {<!-- -->
formRef.value!.validateField('selectValue')
}
</script>

3. Custom function verification form

<template>
<form ref="formRef" class="base-form" :model="form" :label-width="120" :rules="rules" hide-required-asterisk>
<el-form-item label="Mobile phone number:" prop="phoneNumber">
<el-input v-model="form.phoneNumber" autocomplete="off" clearable/>
</el-form-item>
</form>
</template>
<script setup lang="ts">
import {<!-- --> ref } from 'vue'
import type {<!-- --> FormInstance, FormRules } from 'element-plus'

const formRef = ref(null)

interface RuleForm {<!-- -->
    phoneNumber: string
}

const form = ref<RuleForm>({<!-- -->
    phoneNumber: '',
})

// Custom verification - mobile phone number
const checkPhoneNumber = (rule: any, value: any, callback: any) => {<!-- -->
const pattern = /^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$ /
if(!value) {<!-- -->
callback(new Error('Please enter your mobile phone number'))
} else if(!pattern.test(val)) {<!-- -->
callback(new Error('Please enter the correct mobile phone number'))
} else {<!-- -->
callback()
}
}

// form validation
const rules = reactive<FormRules<RuleForm>>({<!-- -->
    phoneNumber: [{<!-- --> validator: checkPhoneNumber, trigger: 'blur' }],,
})
</script>

4. Verification of multiple input boxes in one line

<template>
<form ref="formRef" class="base-form" :model="form" :label-width="120" :rules="rules" hide-required-asterisk>
<el-form-item class="form-row" label="Test:" prop="test">
        <section class="form-col">
            1 <el-input class="ml-5" v-model="form.test[0]" placeholder="Item 1" clearable/>
        </section>
        <section class="form-col">
            2 <el-input class="ml-5" v-model="form.test[1]" placeholder="Item 2" clearable/>
        </section>
    </el-form-item>
</form>
</template>
<script setup lang="ts">
import {<!-- --> ref, reactive } from 'vue'
import type {<!-- --> FormInstance, FormRules } from 'element-plus'

// form
const formRef = ref<FormInstance>()

interface RuleForm {<!-- -->
    test: string[]
}

const form = ref<RuleForm>({<!-- -->
    test: [],
})

const checkTest = = (rule: any, value: any, callback: any) => {<!-- -->
    const [oneStr, twoEnd] = form.value.coordinate
    const pattern1 = /^[EWew]?[ + -]?([0-9]|[1-8][0-9]|90)(\.\d + )?$/
    const pattern2 = /^[NSns]?[ + -]?([0-9]|[1-9][0-9]|1[0-7][0-9]|180)(\.\ d + )?$/

    if (oneStr & amp; & amp; twoEnd & amp; & amp; pattern1.test(oneStr) & amp; & amp; pattern2.test(twoEnd)) {<!-- -->
        callback()
    } else {<!-- -->
    !oneStr & amp; & amp; !twoEnd & amp; & amp; callback(new Error('Please enter all items'))
!oneStr & amp; & amp; callback(new Error('Please enter the first item'))
!twoEnd & amp; & amp; callback(new Error('Please enter the second item'))
!(pattern1.test(oneStr)) & amp; & amp; callback(new Error('Please enter the correct item 1'))
!(pattern2.test(twoEnd)) & amp; & amp; callback(new Error('Please enter the correct 2nd item'))
!(pattern1.test(oneStr)) & amp; & amp; !(pattern2.test(twoEnd)) & amp; & amp; callback(new Error('Please enter the correct item'))
    }
}

const rules = reactive<FormRules<RuleForm>>({<!-- -->
    test: [{<!-- --> validator: checkTest, trigger: 'blur' }],
})
</script>