|
在后台管理系统的开发中，一般都是操作数据，因此表单的使用频率很高，然而表单的输入基本都需要输入验证来确保提交的数据格式符合需求，因此前端的验证很重要，就会避免一些不必要的错误提交到后台去，因此就用 element-ui 的 el-form 组件举例：
el-form 组件提供了配置式的表单验证功能，只需要通过 rules 对象属性传入约定的验证规则，并将 el-form-item 的 prop 属性设置为需校验的字段名即可。
验证规则说明：
根据文档说明，model 为表单的数据对象，el-form 通过 model 绑定数据。rules 为表单验证规则对象，其中字段名要与 model 中的字段名一一对应el-form-item 容器，通过 label 绑定标签，prop 属性设置为需要验证的字段名表单组件通过 v-model 绑定 model 中的数据
验证规则：
是否必须填： required:true|| fasle根据正则表达式验证： pattern最大长度和最小长度： min 和 max数据转换：transform（value）{return}自定义校验功能：validador:fn(rule, value, callback)
自带验证类型： type
string: 字符串类型（默认值）number: 数字类型boolean:布尔类型method: 函数类型regexp:正则表达式integer: 整型float: 双精度浮点型数字array: 数组类型object: 对象类型enum: 枚举值date: 日期格式url: 网址格式hex: 16进制数字email: 电子邮箱格式
第一种：在 data 中配置 rules 规则然后绑定到 el-form 的 rules 属性上
data(){
return {
ruleForm: { name: '' },
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
{ pattern: /^[\u4e00-\u9fa5]+$/, message: '只能输入中文', trigger: 'blur' }
]
}
}
},
第二种：在 el-form-item 中单个添加验证规则
第三种：选择自定义验证, validator
data() {
const userValidator = (rule, value, callback) => {
if (value.length > 3 && value.length
callback(new Error('用户名长度必须大于3小于5'))
}
}
return {}
}
rules: {
user: [
{ validator: userValidator, trigger: 'change' }
]
}
第四种：嵌套的表单
一般业务场景是，有一些表单项需要按照条件显示或者隐藏，data 里面的 model 数据可能会是对象里面套对象的，el-form 也同样支持嵌套的验证，写法一般如下：
export default {
data() {
return {
ruleForm: {
info: {
name: ''
}
},
rules: {
info: {
name: [{ required: true, message: '请输入', trigger: 'change' }]
}
}
};
}
};
第五种：动态添加校验规则
|