How to use Vue and Element-UI to implement complex validation logic of forms

How to use Vue and Element-UI to implement complex validation logic of forms

Introduction:
In developing web applications, form validation is a frequently occurring requirement. Form validation can ensure that user-entered data conforms to specific formats or rules, thereby improving data accuracy and application stability. This article will introduce how to use Vue and Element-UI to implement complex validation logic of forms, and provide readers with relevant code examples.

1. Introduction to Element-UI
Element-UI is a desktop component library developed based on Vue.js. It provides a series of easy-to-use and beautiful UI components, such as tables, forms, Buttons etc. Element-UI has many built-in form verification functions, which can easily implement simple verification logic.

2. The basic principle of form verification
The basic principle of form verification is to obtain the value input by the user by monitoring the change event of the form element, and then verify it according to a series of preset rules. If the verification passes, the status of the form element will be changed to "Verification Passed", otherwise an error message will be displayed and the status of the form element will be changed to "Verification Failed".

3. Use Element-UI for simple form verification
First, we need to introduce the Form and FormItem components of Element-UI, and then use these components in the Vue template to build the form. In the specified form element, you can define validation rules by setting the rules attribute, as shown below:

The form object in the data is stored in the form The value of each input box, and the rules object defines the validation rules for each input box.

In Vue's data, we can define form and rules objects as follows:

data() {
return {

form: {
  username: '',
  password: ''
},
rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
  ]
}

}
}
In the rules object, you can define multiple verification rules, such as required, length limit, etc. The message attribute defines the error message, and the trigger attribute defines the event triggered by the verification.

In Vue's methods, we can define the method validateForm to verify the form. The code is as follows:

methods: {
validateForm() {

this.$refs.myForm.validate((valid) => {
  if (valid) {
    this.$message({
      type: 'success',
      message: '表单校验通过'
    })
  } else {
    this.$message.error('表单校验失败')
    return false
  }
})

}
}
In the validateForm method, we call this.$refs.myForm.validate() method to trigger the verification of the form. The verification result is passed through the callback function valid. If the verification passes, a success message will be displayed, otherwise a failure message will be displayed.

4. Implement complex verification logic
Sometimes, we need to implement more complex verification logic, such as comparing whether the values ​​​​of two input boxes are equal, verifying email addresses, verifying mobile phone numbers, etc. In this case, we can use custom validation rules.

First, in Vue's data, we can define custom verification rules, as shown below:

data() {
return {

rules: {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: this.validatePassword, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: this.validateConfirmPassword, trigger: 'blur' }
  ]
}

}
}
In the rules object, we can define custom verification rules, where the validator attribute defines the verification function.

Then, in Vue’s methods, we can define a custom validation function, as shown below:

methods: {
validatePassword(rule, value, callback) {

if (value.length < 6 || value.length > 20) {
  callback(new Error('密码长度在6到20个字符'))
} else {
  callback()
}

},
validateConfirmPassword(rule, value, callback) {

if (value !== this.form.password) {
  callback(new Error('两次输入的密码不一致'))
} else {
  callback()
}

}
}
In the custom verification function, we can call the callback function callback to pass the verification results. If the verification passes, callback() is called, otherwise callback(new Error('error message')) is called.

Finally, use custom validation rules in the Vue template, as shown below:

In custom validation rules, we can use the type attribute to specify the built-in validation rules of Element-UI, such as Email rules can be implemented by setting the type attribute to 'email'.

Summary:
This article introduces how to use Vue and Element-UI to implement the complex verification logic of the form. Through the Form and FormItem components provided by Element-UI, we can easily build forms and define validation rules by setting the rules attribute. For complex verification logic, we can implement custom verification rules and verification functions. I hope this article will be helpful for everyone to understand and use Vue and Element-UI for form verification.

Code sample:
The following is a complete sample code:

<script><br>export default {<br> data() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' } ] } }</pre><div class="contentsignin">Copy after login</div></div><p>},<br> methods: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>validateForm() { this.$refs.myForm.validate((valid) =&gt; { if (valid) { this.$message({ type: 'success', message: '表单校验通过' }) } else { this.$message.error('表单校验失败') return false } }) }</pre><div class="contentsignin">Copy after login</div></div><p>}<br>}<br></script>

以上就是使用Vue和Element-UI实现表单的复杂校验逻辑的一些简单介绍和代码示例。希望本文对于读者能够有所帮助，对于Vue和Element-UI有更深层次的理解和应用。谢谢阅读！

The above is the detailed content of How to use Vue and Element-UI to implement complex validation logic of forms. For more information, please follow other related articles on the PHP Chinese website!