当前位置：首页 > news >正文

vue- form动态表单验证规则-表单验证

news 2025/8/5 15:45:14

前言

以element官网的form表单的-动态增减表单项为例讲解表单验证规则
动态的功能就是v-model配合push + v-for 便利来实现的
我们需要熟知2个知识点prop表单验证需要跟v-model绑定的值是一样的，
如果是一个数组便利的表单，那就需要绑定这个数组每一项v-model值。

思路讲解

代码实例

<template><div><el-form:model="dynamicValidateForm"ref="dynamicValidateForm"label-width="100px"class="demo-dynamic"><el-form-itemprop="email"label="邮箱":rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur', 'change'],},]"><el-input v-model="dynamicValidateForm.email"></el-input></el-form-item><el-form-itemv-for="(domain, index) in dynamicValidateForm.domains":label="'域名' + index":key="domain.key":prop="'domains.' + index + '.value'":rules="{required: true,message: '域名不能为空',trigger: 'blur',}"><el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button></el-form-item><el-form-item><el-button type="primary" @click="submitForm()">提交</el-button><el-button @click="addDomain">新增域名</el-button><el-button @click="resetForm()">重置</el-button></el-form-item></el-form></div>
</template>
<script>
export default {data() {return {dynamicValidateForm: {domains: [{value: "",},],email: "",},};},methods: {submitForm() {this.$refs.dynamicValidateForm.validate((valid) => {if (valid) {alert("submit!");} else {console.log("error submit!!");return false;}});},resetForm() {this.$refs.dynamicValidateForm.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>

总结：

经过这一趟流程下来相信你也对 vue- form动态表单验证规则-表单验证有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！