Form validation is one of the most commonly used functions in the front-end development process. Based on my personal work experience, I will summarize and explain the basic usage of the form validation function. The following is a demo of the form el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label="Mailbox" :rules="[ { required: true, message: 'Please enter your email address', trigger: 'blur' }, { type: 'email', message: 'Please enter a valid email address', trigger: ['blur', 'change'] } ]" > <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item> <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'Domain name' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: 'Domain name cannot be empty', trigger: 'blur' }" > <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button> <el-button @click="addDomain">Add a new domain name</el-button> <el-button @click="resetForm('dynamicValidateForm')">Reset</el-button> </el-form-item> </el-form> <script> export default { data() { return { dynamicValidateForm: { domains: [{ value: '' }], email: '' } }; }, 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(); }, removeDomain(item) { var index = this.dynamicValidateForm.domains.indexOf(item) if (index !== -1) { this.dynamicValidateForm.domains.splice(index, 1) } }, addDomain() { this.dynamicValidateForm.domains.push({ value: '', key: Date.now() }); } } } </script> First, explain several key attributes in the el-form tag
The rules field is used to define specific validation rules for each field. For usage, please refer to the demo example at the beginning. Required indicates whether the field is required, message is the validation prompt, and trigger is a single validation trigger. You can also customize validation rules through the validator field. The validateProductName method performs empty check and length check on the product name. It should be noted that all conditional branches must be processed with callbacks, otherwise the validation may cause exceptions. 1. Reset the form Call the form reset method this.$refs.dynamicValidateForm.resetFields() to implement it. Of course, date controls of the datetimerange type cannot be reset using this method, and the bound fields must be reset manually. 2. Clear the verification prompt Call the method this.$refs.dynamicValidateForm.clearValidate() to implement it. If you only need to clear the prompt of a single control, just pass the prop attribute value corresponding to the control as a parameter. Another way is to add the ref attribute value to the el-form-item tag corresponding to the control, and then call the clearValidate method. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: MySQL 8.0.19 installation and configuration method graphic tutorial
>>: How to use Docker to build enterprise-level custom images
<input> is used to collect user information ...
Recently, there is a requirement for uploading pi...
The react version when writing this article is 16...
MySQL replace and replace into are both frequentl...
Docker officially recommends that we use port map...
VMware vSphere is the industry's leading and ...
Usage of having The having clause allows us to fi...
Previously, I summarized how to use CSS to achieve...
Table of contents Preface Create a bridge network...
Table of contents 1.Json string 1.1Json Syntax 1....
Table of contents 1. Ordinary functions 2. Arrow ...
Note: I use Centos to install docker Step 1: Inst...
Table of contents View network configuration View...
Table of contents 1. Don’t treat objects as Maps ...
Occasionally, I need to group select contents. In ...