表单验证常用规则
required 为true 必填
pattern 正则验证
min 字符串的最小长度
max 字符串的最大长度
validator 自定义函数来完成校验
trigger 校验的触发方式 值可为change值改变/blur失去焦点
message 验证不满足提示消息
规则使用
1.使用自带规则校验
//这是结构
<el-from :rules="rules" ref="formName">
<el-form-item prop="name"></el-form-item>
</el-from>
//这里是规则
data() {
return {
rules: {
name: [ //给from表单中prop为name的input设置规则
{ required: true, message: '请输入活动名称', trigger: 'blur' }, //必填
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, //长度3-5
{
pattern: /^1[3,4,5,6,7,9,8]\d{9}$/,
message: '手机号格式不正确',
trigger: 'blur', //正则校验
},
],
},
}
},
2.自定义验证
validator是一个函数,有三个参数(rule当前规则,value 当前值,callback回调函数),用于自定义规则
//规则定义
data(){
//规则函数
var checkMobile = function (rule, value, callback) {
value.charAt(2) === '9' //验证第三位数是否为9
? callback() //是则放行
: callback(new Error('手机号第三位必须是9')) //否则错误提醒
}
return {
rules:[
name:[
{
validator: checkMobile, //格式为 属性名:规则函数名
trigger: 'blur' //触发方式
},
],
]
]
}
}
提交时的整体验证
使用validate方法,validate方法可以传两个参数,第一个是校验的结果的布尔值,第二个是整个form表单的数据
用法1:回调形式
submitForm(formName) {
//this.$refs[formName]为el-form的ref
this.$refs[formName].validate((isOk,value) => { //isOk为返回的验证结果,value为表单数据
if (isOk) {
console.log('成功')
} else {
console.log('失败')
}
})
},
用法二: promise.then().catch()的用法
submitForm(formName) {
this.$refs[formName].validate().then(() => {
console.log('成功')
})
.catch(() => {
console.log('失败')
})
},