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:

d477f9ce7bf77f53fbcf36bec1b69b7a
8ec0c4751f0bebda16bd8df47bbe1b9d

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
  <el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="validateForm">提交</el-button>
</el-form-item>

ffdb25bf2f9d37a252c9d16e8e43c40c
21c97d3a051048b8e55e3c8f199a54b2
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:

9044c39e07c5f7bfdbe139ba63ef273d3950f2ccdbe6d532f43d14c598b37daa
3d2371aff8fe724e1b7407502d150d7a
60581f141e7815b4d1bc2011e7d7115f
c9e8474c5540725730350ab666131cdc3950f2ccdbe6d532f43d14c598b37daa
1e6a978c8f0830a62863d26bde341c78
464ebad45dd4d7a0abe6a6ae6d4a4986
3d2371aff8fe724e1b7407502d150d7a
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:

d477f9ce7bf77f53fbcf36bec1b69b7a
f986b12ed2685b503322a4f3fa94f73f

<el-form-item label="用户名" prop="username">
  <el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
  <el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="validateForm">提交</el-button>
</el-form-item>

ffdb25bf2f9d37a252c9d16e8e43c40c
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
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' }
    ]
  }
}

},
methods: {

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

}
}
2cacc6d41bbb37262a98f745aa00fbf0

以上就是使用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!