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
Table of contents Some basic configuration About ...
This article shares the specific code for importi...
Isolation of process address spaces is a notable ...
Table of contents Preface 1. The request content ...
This article shares the specific code of javascri...
Specific method: (Recommended tutorial: MySQL dat...
The background color of the table can be set thro...
Neo4j (one of the Nosql) is a high-performance gr...
There are two meta attributes: name and http-equiv...
When I was at work today, the business side asked...
This article shares the specific code of jQuery t...
Basic Concepts Absolute positioning: An element b...
Table of contents Preface Static scope vs. dynami...
KVM stands for Kernel-based Virtual Machine, whic...
Today's web designs tend to display very larg...