Preface
Last one A brief introduction Form The basic concept and basic code framework of form verification ; Today, I will start to summarize the commonly used verification rules . I have been struggling with how to classify and elaborate better , After thinking for a while, I think it's still necessary to see the effect first , Only then can we continue to study deeply （ Anyway, I'm like this , Only effective can drive ）.
Reference link
https://element.eleme.io/#/zh-CN/component/form
https://github.com/yiminghe/async-validator
Usage mode
routine
utilize el-form Of rules attribute , Unified processing of forms
The conventional way of using forms for unified processing is like Official website As in the example , Just go through rules Property to pass in the validation rules of the contract , And will Form-Item Of prop Property is set to the field name to be verified ;
Such as ： Form rules Property is bound to data Inside rules object ;
Form form-item The name of the event Of prop Attribute corresponds to name The rules ;
<
el
-
form :
model
=
"ruleForm" :
rules
=
"rules"
ref
=
"ruleForm"
label
-
width
=
"100px"
class
=
"demo-ruleForm"
>
<
el
-
form
-
item
label
=
" The name of the event "
prop
=
"name"
>
<
el
-
input
v
-
model
=
"ruleForm.name"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
label
=
" Activity area "
prop
=
"region"
>
<
el
-
select
v
-
model
=
"ruleForm.region"
placeholder
=
" Please select the activity area "
>
<
el
-
option
label
=
" Zone one "
value
=
"shanghai"
>
<
/el-option>
<
el
-
option
label
=
" Area two "
value
=
"beijing"
>
<
/el-option>
<
/el-select>
<
/el-form-item>
<
el
-
form
-
item
>
<
el
-
button
type
=
"primary"
@
click
=
"submitForm('ruleForm')"
>
Create... Now
<
/el-button>
<
el
-
button
@
click
=
"resetForm('ruleForm')"
>
Reset
<
/el-button>
<
/el-form-item>
<
/el-form>
<
script
>
export
default {
data() {
return {
ruleForm: {
name:
'',
region:
'',
},
rules: {
name: [
{
required:
true,
message:
' Please enter the activity name ',
trigger:
'blur' },
{
min:
3,
max:
5,
message:
' The length is in 3 To 5 Characters ',
trigger:
'blur' }
],
region: [
{
required:
true,
message:
' Please select the activity area ',
trigger:
'change' }
],
}
};
},
methods: {
submitForm(
formName) {
this.
$refs[
formName].
validate((
valid)
=> {
if (
valid) {
alert(
'submit!');
}
else {
console.
log(
'error submit!!');
return
false;
}
});
},
resetForm(
formName) {
this.
$refs[
formName].
resetFields();
}
}
}
<
/script>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
utilize el-form-item Of rules attribute , Handle form items separately
Sometimes the whole form may only need one required item , Or you need to do a simple special treatment for this required item , You can choose to do this at this time ：
Such as ： Only the activity name is required in the form ; Just do what you need el-form-item The binding rules Attribute is enough ;
<
el
-
form :
model
=
"ruleForm"
ref
=
"ruleForm"
label
-
width
=
"100px"
class
=
"demo-ruleForm"
>
<
el
-
form
-
item
label
=
" The name of the event "
prop
=
"name" :
rules
=
"[{ required: true, message: ' Activity name cannot be empty ',trigger: 'blur'}]"
>
<
el
-
input
v
-
model
=
"ruleForm.name"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
label
=
" Activity area "
prop
=
"region"
>
<
el
-
select
v
-
model
=
"ruleForm.region"
placeholder
=
" Please select the activity area "
>
<
el
-
option
label
=
" Zone one "
value
=
"shanghai"
>
<
/el-option>
<
el
-
option
label
=
" Area two "
value
=
"beijing"
>
<
/el-option>
<
/el-select>
<
/el-form-item>
<
el
-
form
-
item
>
<
el
-
button
type
=
"primary"
@
click
=
"submitForm('ruleForm')"
>
Create... Now
<
/el-button>
<
el
-
button
@
click
=
"resetForm('ruleForm')"
>
Reset
<
/el-button>
<
/el-form-item>
<
/el-form>
<
script
>
export
default {
data() {
return {
ruleForm: {
name:
'',
region:
'',
},
};
},
methods: {
submitForm(
formName) {
this.
$refs[
formName].
validate((
valid)
=> {
if (
valid) {
alert(
'submit!');
}
else {
console.
log(
'error submit!!');
return
false;
}
});
},
resetForm(
formName) {
this.
$refs[
formName].
resetFields();
}
}
}
<
/script>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
Using ternary expressions , Dynamic processing of required or non required form items
Sometimes whether a form item is required depends on another form item , Or some other field value ;
such as ： When Shanghai is selected as the activity area , Activity time is required ;
It's very simple to implement , Just use a ternary expression .
( I have little experience in development , It's great to see this treatment ！)
<
el
-
form :
model
=
"ruleForm"
ref
=
"ruleForm"
label
-
width
=
"100px"
class
=
"demo-ruleForm"
>
<
el
-
form
-
item
label
=
" The name of the event "
prop
=
"name"
:
rules
=
"ruleForm.region == '0' ? [{ required: true, message: ' Activity name cannot be empty ',trigger: 'blur'}] : [{ required: false}]"
>
<
el
-
input
v
-
model
=
"ruleForm.name"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
label
=
" Activity area "
prop
=
"region"
>
<
el
-
select
v
-
model
=
"ruleForm.region"
placeholder
=
" Please select the activity area "
>
<
el
-
option
label
=
" Zone one "
value
=
"shanghai"
>
<
/el-option>
<
el
-
option
label
=
" Area two "
value
=
"beijing"
>
<
/el-option>
<
/el-select>
<
/el-form-item>
<
el
-
form
-
item
>
<
el
-
button
type
=
"primary"
@
click
=
"submitForm('ruleForm')"
>
Create... Now
<
/el-button>
<
el
-
button
@
click
=
"resetForm('ruleForm')"
>
Reset
<
/el-button>
<
/el-form-item>
<
/el-form>
<
script
>
export
default {
data() {
return {
ruleForm: {
name:
'',
region:
'',
},
};
},
methods: {
submitForm(
formName) {
this.
$refs[
formName].
validate((
valid)
=> {
if (
valid) {
alert(
'submit!');
}
else {
console.
log(
'error submit!!');
return
false;
}
});
},
resetForm(
formName) {
this.
$refs[
formName].
resetFields();
}
}
}
<
/script>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
Customize
validator binding (rule, value, callback) => {} , Basic usage example
This is an example given on the official website , It shows how to use custom verification rules to complete the second verification of passwords . It should be noted that ： Custom check callback Must be called .
<
el
-
form :
model
=
"ruleForm"
status
-
icon :
rules
=
"rules"
ref
=
"ruleForm"
label
-
width
=
"100px"
class
=
"demo-ruleForm"
>
<
el
-
form
-
item
label
=
" password "
prop
=
"pass"
>
<
el
-
input
type
=
"password"
v
-
model
=
"ruleForm.pass"
autocomplete
=
"off"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
label
=
" Confirm the password "
prop
=
"checkPass"
>
<
el
-
input
type
=
"password"
v
-
model
=
"ruleForm.checkPass"
autocomplete
=
"off"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
label
=
" Age "
prop
=
"age"
>
<
el
-
input
v
-
model.
number
=
"ruleForm.age"
>
<
/el-input>
<
/el-form-item>
<
el
-
form
-
item
>
<
el
-
button
type
=
"primary"
@
click
=
"submitForm('ruleForm')"
>
Submit
<
/el-button>
<
el
-
button
@
click
=
"resetForm('ruleForm')"
>
Reset
<
/el-button>
<
/el-form-item>
<
/el-form>
<
script
>
export
default {
data() {
var
checkAge
= (
rule,
value,
callback)
=> {
if (
!
value) {
return
callback(
new
Error(
' Age cannot be empty '));
}
setTimeout(()
=> {
if (
!
Number.
isInteger(
value)) {
callback(
new
Error(
' Please enter a numeric value '));
}
else {
if (
value
<
18) {
callback(
new
Error(
' Must be old 18 year '));
}
else {
callback();
}
}
},
1000);
};
var
validatePass
= (
rule,
value,
callback)
=> {
if (
value
===
'') {
callback(
new
Error(
' Please input a password '));
}
else {
if (
this.
ruleForm.
checkPass
!==
'') {
this.
$refs.
ruleForm.
validateField(
'checkPass');
}
callback();
}
};
var
validatePass2
= (
rule,
value,
callback)
=> {
if (
value
===
'') {
callback(
new
Error(
' Please input the password again '));
}
else
if (
value
!==
this.
ruleForm.
pass) {
callback(
new
Error(
' The two passwords are not the same !'));
}
else {
callback();
}
};
return {
ruleForm: {
pass:
'',
checkPass:
'',
age:
''
},
rules: {
pass: [
{
validator:
validatePass,
trigger:
'blur' }
],
checkPass: [
{
validator:
validatePass2,
trigger:
'blur' }
],
age: [
{
validator:
checkAge,
trigger:
'blur' }
]
}
};
},
methods: {
submitForm(
formName) {
this.
$refs[
formName].
validate((
valid)
=> {
if (
valid) {
alert(
'submit!');
}
else {
console.
log(
'error submit!!');
return
false;
}
});
},
resetForm(
formName) {
this.
$refs[
formName].
resetFields();
}
}
}
<
/script>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
validator binding method, Check according to the return value of the interface and prompt the error message
Demand is , Input id Then adjust the interface to determine whether it is repeated , If the prompt is repeated ;
rule: {
id: [{
required:
true,
message:
' Please enter id',
trigger:
'blur' },
{
validator:
this.
check,
trigger:
'blur' }],
check(
rule,
value,
callback){
checkData(
this.
query).
then(
res
=>{
if(
res.
data.
data
>
0) {
this.
query.
id
=
''
callback(
new
Error(
'id repeat , Please re-enter ！'));
}
else {
callback()
}
})
},
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
Pay attention to clearing the verification rules in time resetFields()
Often used in projects el-dialog It uses el-form, The accompanying business is often added and modified ; Attention should be paid to closing dialog when , Or cancel the corresponding business , Clear the verification rules of the form ！ Or open it next time dialog, There will still be a pile of red verification messages , It's not a good experience .
