element-ui表单验证
表单基本结构
el-form
包含 el-form-item
//template
//el-form要动态绑定model,如果需要验证规则,还要动态绑定rules
<el-form :model="user" :rules="loginRules" ref="loginForm">
//el-form-item 如果要验证,需要用prop来绑定
<el-form-item prop="mobile">
<el-input placeholder="请输入手机号" v-model="user.mobile"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input placeholder="请输入密码" v-model="user.password"></el-input>
</el-form-item>
</el-form>
//script
data(){
return {
user: {
mobile: '',
password: ''
},
}
}
- 设定规则
//el-form中动态绑定的rules中设定
//参数:required-是否必填,message-错误提示信息,pattern-正则,trigger-触发条件
//prop绑定的属性名,传入的规则是数组包对象,不同的验证条件要分开写
loginRules:{
mobile: [{
required: true,
message: '请填写手机号',
trigger: 'blur'
}, {
pattern: /^1[3-9]\d{9}$/,
message: '请输入正确手机号',
trigger: 'blur'
}],
password: [{
required: true,
message: '请填密码',
trigger: 'blur'
}]
}
- 自定义规则
定义一个方法函数,函数有三个参数(rule, value, callback) ,rule是定义的规则,value是验证的值,callback是回调函数,如果判断错误,需要callback(new Error())回调一个错误提示,然后在绑定的rules中,使用validator接收
data () {
const validatePassword = function (rule, value, callback) {
value.length >= 3 ? callback() : callback(new Error('密码长度不小于3位'))
}
return {
loginRules:{
password: [{
required: true,
message: '请填密码',
trigger: 'blur'
},
//接收自定义的规则
{validator: validatePassword, trigger: 'blur'}]
}
- 表单统一验证
1.用ref拿到整个el-form
2.用validate方法传入处理函数执行处理,执行函数第一个参数拿到的是布尔值,如果表单中的规则都通过,则会返回true
//template
<el-form :model="user" :rules="loginRules" ref="loginForm">
//methods
login(){
this.$refs.loginForm.validate(function(isOK){
if(isOK){
console.log('填写信息均符合要求')
}
})
}
$nextTick()
如果代码需要Dom渲染完毕再执行,处理用定时器异步执行外,可以用$nextTick来执行
例子:原本隐藏的文本框弹出后自动获取焦点,如果弹出和获取焦点写在同一个执行函数,则获取焦点会失效
methods:{
showInput(){
this.inputArea = true, //文本框显示
//元素渲染后执行
this.$nextTick(()=>{
this.$refs.inputArea.focus()
})
}
}