Element UI 作为一款流行的Vue.js UI框架，提供了丰富的表单组件和强大的表单验证功能，极大地简化了前端开发中的表单处理流程。本文将深入探讨Element UI的表单验证机制，包括基本的验证规则、自定义验证规则、以及一些高级应用场景，帮助你构建健壮且用户友好的表单交互。
常用正则：
https://blog.csdn.net/qq_29752857/article/details/123344971
基础校验规则
1. 必填校验
最基本的需求之一是确保某些字段不为空。这可以通过设置required为true实现：
{ required: true, message: '请输入xxxxx', trigger: 'blur' }
2. 字符数限制
控制输入的字符数量，可以使用min和max属性：
{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确格式,可保留两位小数', trigger: 'change' }
3. 正则表达式校验
对于特定格式的输入，可以利用pattern属性结合正则表达式：
{ type: 'number', min: 20, message: '请输入不少于20个字符', trigger: 'blur' }
4. 类型校验
确保输入值的类型，比如必须是数字：
{ type: 'number', min: 20, message: '请输入不少于20个字符', trigger: 'blur' }
自定义校验规则
当内置规则无法满足需求时，可以定义自己的验证逻辑。以下是一个自定义验证合同金额的例子：
rules: { amount: [ { validator: (rule, value, callback) => { if (!value) { return callback(); // 非必填，空值直接通过 } const regex = /^\d+(\.\d{1,2})?$/; // 检查非负数且最多两位小数 if (regex.test(value)) { callback(); // 验证通过 } else { callback(new Error('合同金额应为非负数，且小数点后最多保留两位')); } }, trigger: ['blur', 'change'] // 在失焦或值改变时触发校验 } ] }
手动触发整体校验
在某些场景下，可能需要在特定时刻手动触发整个表单的验证，例如提交前：
submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }
重置表单及校验状态
当需要清空表单并重置所有校验状态时，可以调用resetFields方法：
resetForm(formName) { this.$refs[formName].resetFields(); }
结语
Element UI的表单验证功能强大且灵活，通过上述基础规则、自定义规则、手动校验及表单重置技巧，开发者可以轻松应对各种复杂的表单设计需求，提升用户体验和应用质量。掌握这些技巧，将使你的Vue项目开发更加高效和顺畅。
