el-form 表单校验 动态

### Element UI 中 `el-form` 的动态表单校验 在开发过程中，有时需要根据特定条件来决定哪些字段应该被校验以及何时触发这些校验逻辑。对于这种情况，在Element UI框架下可以通过编程方式调用API接口完成此操作。 当涉及到动态添加或移除表单项时，可以利用Vue.js的数据绑定特性配合Element UI提供的`el-form-item`组件属性来进行处理。每当有新的输入框加入到页面上之后，应当立即更新对应的rules对象以确保新增加的部分也能得到有效的验证[^3]。 为了实现动态表单校验，下面是一个简单的例子： ```html <template> <div id="app"> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <!-- 静态部分 --> <el-form-item prop="email" label="Email地址：" required> <el-input v-model="dynamicValidateForm.email"></el-input> </el-form-item> <!-- 动态区域开始 --> <div v-for="(domain, index) in dynamicValidateForm.domains" :key="index"> <el-form-item :prop="'domains.' + index + '.value'" :label="'域名 ' + (index+1)" :rules="{required: true, message: '请输入域名', trigger: 'blur'}"> <el-input v-model="domain.value"></el-input> </el-form-item> <el-button @click.prevent="removeDomain(domain)">删除</el-button> </div> <el-button type="primary" @click="addDomain">新增域</el-button> <!-- 提交按钮 --> <el-form-item> <el-button type="success" @click="submitForm('dynamicValidateForm')">提交</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { dynamicValidateForm: { email: '', domains: [{ value: '' }] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功!'); } else { console.log('错误的提交!!'); return false; } }); }, addDomain() { this.dynamicValidateForm.domains.push({ value: '' }); }, removeDomain(item) { var index = this.dynamicValidateForm.domains.indexOf(item); if(index !== -1){ this.dynamicValidateForm.domains.splice(index, 1); } } } }; </script> ``` 在这个案例里，通过点击“新增域”的按钮能够向表单中增加额外的文本框用于接收用户的输入，并且每一个新创建出来的项目都会自动应用预定义好的规则集进行合法性检查。同样地，“删除”功能允许用户去除不再需要填写的信息条目而不影响其他已存在的内容[^4]。