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

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

2022-07-04 20:36:00 【51CTO】

Form Common verification rules for components -1（ Ongoing update ~）_Form Form verification

Preface

I feel more and more deeply recently , It's about sharing often , Share your own pitfalls , Share your solutions , Share your experiences , It's very necessary . because , My first reaction when I encounter a problem is to see how others solve it , Someone must have the same idea , At this time, we all need to share very generously . therefore , In the future, I will try to summarize and share regularly , It's convenient for others and for yourself ~

Reference link

https://element.eleme.io/#/zh-CN/component/form

https://github.com/yiminghe/async-validator

Introduction to form verification

Purpose of use

On the premise of preventing users from making mistakes , Let users find and correct errors as early as possible .

Easy to use

Form Component provides the function of form validation , 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 .

       
       <
       
       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
       
       >
       
       <
       
       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: 
       
       '',
       
        },
       
       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' }
       
          ],
       
        }
       
      };
       
    },
       
       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.

Common field

`required`

Is it required , Used to verify whether the field content is empty ;

`type`

data type , Similar data format verification , The default is string, Common types are number,boolean,integer,float,array,date,email etc. ;