在el-form-item单个添加验证
做法:需要在el-form-item标签中加入 :rules=’'直接是验证的条件 ‘’
<el-form-item label="用户名" :prop="userName" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
<el-input v-model="userName" :maxlength="16" placeholder clearable></el-input>
</el-form-item>
在表单上加多个验证
做法:需要在el-form-item标签中加入 :rules=’'rules ‘’ ,然后在data()中写入rule{添加每个表单的验证}
<el-form :model="formData" :rules="dateRule" ref="form">
<el-form-item label="用户名" prop="userName">
<el-input v-model="formData.userName" type="password" placeholder="请输入用户名" clearable></el-input>
</el-form-item>
<el-form-item label="密码" prop="userPass">
<el-input v-model="formData.userPass" :maxlength="18" placeholder="请输入密码" clearable></el-input>
</el-form-item>
</el-form>
// data 中
rule: {
userName: loginName: [
{ required: true, message: "用户名不能为空", trigger: "blur" }
],
userPass: [
{ required: true, message: "密码不能为空", trigger: "blur" }
]
}
基础验证
{ required: true, message: '请输入姓名', trigger: 'blur' },//不能为空
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },//长度
{ required: true,
pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
message: '姓名不支持特殊字符',
trigger: 'blur' }//正则
自定义验证
data() {
let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
var newPass= (rule, value, callback) => {
if (!reg.test(value)) {
callback(new Error('密码应是6-12位数字、字母或字符!'))
} else if (this.form.oldPasswd === value) {
callback(new Error('新密码与旧密码不可一致!'))
} else {
callback()
}
}
}
return {
form: {
newPasswd: ''
},
rules: {
newPasswd: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ validator: newPass, trigger: 'blur' }
]
}
}
}