当前位置：网站首页>Common verification rules of form components -2 (continuously updating ~)

Common verification rules of form components -2 (continuously updating ~)

2022-07-07 22:33:00 【51CTO】

Form Common verification rules for components -2（ Ongoing update ~）_ Forms

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 ;

Form Common verification rules for components -2（ Ongoing update ~）_ Customize _02

       
       <
       
       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 ！)

Form Common verification rules for components -2（ Ongoing update ~）_ Customize _03

Form Common verification rules for components -2（ Ongoing update ~）_ Customize _04

Form Common verification rules for components -2（ Ongoing update ~）_ Forms _05

       
       <
       
       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 .

Form Common verification rules for components -2（ Ongoing update ~）_ Reset _06

       
       <
       
       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 .

Form Common verification rules for components -2（ Ongoing update ~）_ Forms _07