The first sentence of the text – “this article has participated in the good article calling order activities, click to see: back end, big front end of the double track submission, 20,000 yuan prize pool for you to challenge!”
1 Element form validation
1 General check writing method
If you don’t understand this, go to the official document
2. Cyclic El-form-item verification writing method
When recycling el-form-item, note how prop, and rules are written. Rules bind to rules. Link in data
Each input is a reuse of the link verification method and checked separately
2.1 Second-level cyclic writing method
3. Nested writing
What should I say if I have multiple inputs on one line, compared to a lot of people who have multiple inputs on one line, that I can check pairs Note that the outer el-form-item does not write prop, and the yellow box is written separately. These two are different For linkage validation, notice that the red box uses this.formData.minprice to compare the value of the current method
4 Pass-value check
Sometimes input in a form is looping out, and its validation rules need to get a value in the current loop for comparison. We all know that element’s official validation methods do not support custom arguments. How can we solve this problem Select a custom validator for the el-form-item. The value is a valid method written within the Methods lifecycle and the parameter is passed Return an arrow function in the Valid method within the methods lifecycle, and write the validation rule you want in the arrow function, so you can receive custom parameters.
5 Cyclic form verification
Businesses may encounter the need to validate such array objects [{},{},{}], and the key values in each object in the array need to be edited and verified, so the form needs to be generated in a loop, and the contents of each form need to be verified separately.
One thing to note here is the binding of the ref on the el-form tag
You may also encounter el-Item second-level cyclic validation in your code, so pay attention to how the prop is bound
<el-collapse-item :title="item.name" :name="index" v-for="(item, index) in edit" :key="index">
<el-form
:model="item"
label-width="220px"
size="small"
class="price-form"
:rules="rules"
:ref="'otherInfo'+index"
>
<el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<el-form-item label="xxxx" prop="title">
<el-input v-model="item.title"
type="text"
size="mini"
clearable
placeholder="xxxx"
style="width: calc(98% - 150px); min-width: 200px;"
>
</el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="12" :lg="12" v-for="(it,j) in item.attributions" :key="it.id">
<el-form-item :label="it.attribute_key" :prop="'attributions.'+ j +'.attribute_value'"
:rules="[{required: true, validator: attBasicInforules(), trigger: 'blur' }]"
>
<el-input clearable v-model="it.attribute_value"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-collapse-item>
Copy the code
<script>
attBasicInforules() {
// Attribute validation rule (non-null)
return (rule, value, callback) = > {
if(! value) {return callback(new Error('This property cannot be empty'))
}
callback()
}
}
const other = () = > {
const list = []
this.edit.forEach((item, key) = > {
list.push(new Promise((resolve, reject) = > {
this.$refs['otherInfo' + key][0].validate(valid= > {
console.log(valid)
if (valid) {
resolve()
} else {
reject(There is an error in the area, please check the code${key}A form `)}})})return list
}
await Promise.all([categoryChange, ...(other())]).then(res= > {
}).catch(err= > {
this.$message.warning(err)
})
</script>
Copy the code
tip
You can write multiple trigger events
Verify the detailed usage of rules
In rules, a single field validation rule can contain multiple arrays, and each array is a validation rule:
rules: {
title: [{required: true.message: 'Please enter an activity name'.trigger: 'blur' },
{ min: 3.max: 5.message: '3 to 5 characters long'.trigger: 'blur'}].box: [{required: true.message: 'Please select'.trigger: 'change'}].box1: [{type: 'date'.required: true.message: 'Please select'.trigger: 'change'}].box2: [{type: 'date'.required: true.message: 'Please select'.trigger: 'change'}}]Copy the code
The type of validator
The array object contained in a single inspection rules required/message/parameters such as the trigger/min/Max
It indicates the type of validator to be used, similar to data format validation, and using this, we can verify certain fields without having to write the regex and make the judgment as before.
For example, you only need to configure the rule type:’ URL ‘to validate the URL. The validator already encapsulates these functions and you just need to call them
string
: String (default)number
: Numeric typeboolean
: Boolean typemethod
: Function typeregexp
: Regular expressioninteger
Type:float
: A double-precision floating-point numberarray
: Array typeobject
: Object typeenum
: enumerated valuesdate
: Date formaturl
: Url formathex
: Indicates a hexadecimal numberemail
: Email formatany
: Any type
email = [{
type: "string".required: true.message: 'Please enter email address'.trigger: 'blur'
},
{
type: 'email'.message: 'Please enter the correct email address'.trigger: ['blur'.'change']}]Copy the code
- Required: Verification is required
- Pattern: indicates regular expressions{ type : “string” , required: true , pattern : /^[a-z]+$/ }
- Min/Max: : Indicates the maximum and minimum values
- Len: indicates length verification
- Enum: enum authentication
- Whitespace: Verifies that there are only Spaces (if this is not configured, the full space input value is valid)
The introduction in the official documentation is too rough, see Async-Validator for more detailed validation rules