1.校验方式
1.在form中的rules传入约定的验证规则。
<el-form :model="consultList" :rules="formRules">
<el-form-item label="客户姓名">
</el-form>
2.将form-item中的prop属性设置为需要检验的字段名
<el-form :model="consultList" :rules="formRules">
<el-form-item label="客户姓名" prop="visitor_name">
</el-form>
2.自定义
验证规则表单中，对每一项进行验证定义。
required: true // 必填项
message: 'xxx' // 验证提示
trigger: // 验证触发方式，以下两者可分开写，也可一起写。
blur :失去焦点触发
change:输入框改变触发
min:最小长度
max:最大长度
pattern: /^[A-Za-z0-9_]+$/ 大小写字母、数字、下划线\
1.是否必须： required:true|| fasle
2.根据正则表达式验证： pattern:
3.最大长度和最小长度： min和max
4.数据转换：transform（value）{return}
5.自定义校验功能：validador:fn(rule, value, callback);
6.自带验证类型： type:\
string：必须是类型string。This is the default * type.\
number：必须是类型number。\
boolean：必须是类型boolean。\
method：必须是类型function。\
regexp：必须是RegExp创建新项时不生成异常的实例 或* 字符串RegExp。\
integer：必须是类型number和整数。\
float：必须是类型number和浮点数。\
array：必须是由…确定的数组Array.isArray。\
object：必须是类型object而不是Array.isArray。\
enum：价值必须存在于enum。\
date：值必须有效，由确定 Date\
url：必须是类型url。 \
hex：必须是类型hex。\
email：必须是类型email。
loginFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
]
},
- 验证规则中，validator后接自定义验证函数checkFunction
registFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入注册密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
],
checkPassword: [
{ required: true, message: '再次输入注册密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
{ validator: checkFunction, trigger: 'blur' }
]
}
2.在data中定义验证函数checkFunction
var checkFunction = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.registForm.password) {
callback(new Error('两次输入密码不一致!'))
} else {
callback() // 最后一定要加上callback()
}
}
