Element-ui Form Form Validation - Pocket Validation - Custom Inspection Rules

User login form - data two-way binding

<template>
  <div class="form-container">
    <el-form label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      form: {
      
      
        mobile: '',
        code: ''
      }
    }
  },
  methods: {
      
      
    onSubmit() {
      
      
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
  .form-container{
      
      
    width: 600px;
  }
</style>

summary

• The data items in the form are usually wrapped with an object

• The attribute name is generally consistent with that in the backend interface

• Use v-model two-way binding on elements

Form form validation - basic introduction

Target

Understand the necessity and implementation of form validation

Check Necessity

Before sending a request to the backend to call the interface, we need to verify the parameters to be passed to stifle user errors in the bud.

Do not trust any input from the user! Do not trust any input from the user! Do not trust any input from the user!

check content

• the content can not be blank
• How many digits must the password be
• The format of the mobile phone number must comply with the

Check method

• Validation that does not depend on any component
  • Before submitting, analyze and process the data yourself.
• Verification based on specific components (different component libraries may have different verification methods)

summary

• Form content must be validated (do not trust any input from the user!);

• If you use the form in the component library, it is best to use their own validation methods

Form form component - form validation

Scenes

In the above form, require: username is required

Target

Master the use of form validation in element-ui

Basic steps - a total of three steps

1. Define validation rules. Define rules by format in data()

2. Do attribute configuration on the template to apply the rules (three configurations)

   Set rulesthe attribute input validation rules for the form

   Set properties for forms modelto pass in form data

   Set the attribute for the form item (Form-Item) prop, whose value is set as the field name to be verified

3. Manual verification

Step 1 - Define Form Validation Rules

In data, supplementary definition rules.

Format:

data() {
    
    
  return {
    
    
    rules: {
    
    
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        字段名1: [
          {
    
     验证规则1 },
          {
    
     验证规则2 },
        ],
        字段名2: [
          {
    
     验证规则1 },
          {
    
     验证规则2 },
        ], 
		}
  }
}

example

  {
    
     required: true, message: '请输入验证码', trigger: 'blur' },
  {
    
     pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
  {
    
     min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }

Practical code

data () {
    
    
    return {
    
    
      // 表单验证规则，整体是一个对象
      // 键：要验证的字段, 值：是一个数组，每一项就是一条规则
      
      rules: {
    
    
        // 字段名：mobile就表示要验证的 属性
        // 值: 是一个数组。数组中的每一项表示一条规则。
        mobile: [
          {
    
     required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      }
    }
  },

Notice:

• The attribute names in the rules and the attribute names in the form data items must be consistent.

Step 2 - Configuration in template

content:

1. Bind the model to the el-form component as a form data object

2. Bind the rules attribute to the el-form component to configure validation rules

3. Bind the prop attribute to the form item el-form-item that needs to be verified. Note: the prop attribute needs to specify the data name in the form object

code:

<el-form label-width="80px" :model="form" :rules="rules">
  <el-form-item label="手机号" prop="mobile">
    <el-input v-model="form.mobile"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="code">
    <el-input v-model="form.code"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="onCancel">取消</el-button>
  </el-form-item>
</el-form>

Acceptance effect

When we do this, when the content entered by the user does not meet the requirements of the form rules and an input box is out of focus, it will give a corresponding prompt. When the content we enter meets the requirements, the error prompt will disappear automatically.

Step 3 - Manual Pocket Verification

Format

element-ui的表单组件.validate(valid => {
	if(valid) {
	   // 通过了验证
	} else {
		 // 验证失败
	}
})

illustrate:

• The validate method comes with the form component and is used to verify the content of the form.
• It is necessary to add a reference to the form component in the template: the function of ref is mainly used to obtain the manual trigger verification of the form component

code-template

<el-form label-width="80px" 
+  ref="form"
   :model="form"
   :rules="rules">

Add ref to reference el-form components.

the code

Carry out manual verification when submitting, if the verification is passed

doLogin () {
    
    
  alert('我可以做登录了')
},
submit () {
    
    
  this.$refs.form.validate(valid => {
    
    
    // valid 就是表单验证的结果，如果是true，表示通过了
    // console.log(valid)
    if (valid) {
    
    
      // 通过了验证，你可以做后续动作了
      this.doLogin()
    }
  })
}

summary

step

1. Define validation rules (according to element-ui requirements)

2. Configure templates, apply rules

   Set rulesthe attribute input validation rules for the form

   Set properties for forms modelto pass in form data

   Set the attribute for the element (Form-Item) in the form prop, and its value is set as the field name to be verified

3. Manual verification

Form form component - form validation

Target

1. The phone number cannot be empty and must be an 11-digit phone number (/^1[0-9]{10}$/)

2. The password is required and the length is 6 to 8 characters

the code

define rules

rules:{
    
    
          name: [
            // trigger: 什么时候触发验证 
            {
    
     required: true, message: '请输入手机号', trigger: 'blur' },
            // pattern : 正则
            {
    
     pattern: /^1[345678]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }
          ],
          password: [
            {
    
     required: true, message: '请输入密码', trigger: 'blur' },
            {
    
     min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }
          ]
        }

Configure application rules in the template

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="手机号" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>

Notice

The attribute names in the following three places must be consistent

Form form component - form validation - custom inspection rules

Scenes:

password not allowed is123456

Target

Master the usage format of custom inspection rules

train of thought

Customize validator in rules

Format

rules:{
    
    
    属性名1: [
      {
    
     
        // 注意参数顺序
        validator: function (rule, value, callback) {
    
    
      		// rule：采用的规则
          // value: 被校验的值
          // callback是回调函数， 
          //      如果通过了规则检验，就直接调用callback()
          //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
        	//         例如：callback(new Error('错误说明'))
      	}, 
        trigger: 'blur' 
     }]
}

landing code

rules: {
    
    
  name: [{
    
    required: true, message:'必须要填入', triggle: 'blur'}],
  code: [
      {
    
    
        validator:(rule, value, callback)=>{
    
    
          console.log(rule, value, callback)
          if(value === '123456') {
    
    
            callback(new Error('这是世界上最差的密码了'))
          } else {
    
    
            callback()
          }
      	},
        triggle: 'blur'
      },
      {
    
    min: 6, max:8, message:'长度为6-8位', triggle: 'blur'},
      {
    
    required: true, message:'必须要填入', triggle: 'blur'},
  ]
}

summary

• Custom rules can make the verification logic more flexible, and its format is fixed
• callback must be called