element-ui中的表单验证

作者 likaiqiang 日期 2017-03-22
element-ui中的表单验证

element-ui是一个优秀的基于vuejs的ui库,由饿了么前端推出并开源。

个人觉得,它比bootstrap好用一点,一个原因是它是基于vue的,另一个原因是它的布局模块与响应式模块可以分开写,这点bs是不具备的。

官网的文档写的很详细,我就不多说了。

进入正题,自从接触vue以来,一直在寻找一款表单验证插件,一直没有合适的,经常又用回jquery了,说实话,基于jquery操作dom的开发方式和基于vue的双向数据绑定开发方式经常起冲突,jquery的某些插件并没有提供destroy方法,两者有时候会配合不到一起。

粘一段element官网的代码

<div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
var app = new Vue({
el: '#app',
data() {

var validatePass = (rule, value, callback) => {
if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
},
rules: {
pass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 8, message: '密码长度必须是3-8位', trigger: 'change' }
],
checkPass: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: validatePass, trigger: 'change' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
})

使用方法就不多说了,官网介绍的很详细。

可以使用它内置的规则:比如必填项啦,最小长度最大长度啦,这里也不讨论。上面的例子用到了自定义验证:

{ validator: validatePass, trigger: 'change' }

就是这一句了,key为validator,value为函数名,trigger是这个规则在什么情况下触发,自定义规则可以和内置规则混用。

该函数的三个参数,rule为规则,value是输入的值,callback是规则不通过的回调。

element官网的例子中这个函数是在data里面写的,那么可不可以把它写到methods中,然后用this.validatePass()调用呢,答案是可以的。

接下来说一下它的两个重要的方法

  1. validate
  2. validateField

validate 全局验证

一般我们这样调用它:

this.$refs[formName].validate((vaild)=>{
if(vaild){
//提交数据
}
})

$refs是父子组件通信方法,具体的可以参考$refs,valid是一个boolean值,true为所有规则都验证通过。

validateField 局部验证

this.$refs[formName].validateField('pass',(message)=>{
if(!message.length){
//do something
}
})

该函数第一个参数是规则名,第二个参数是个回调函数,参数message是错误信息,如果没有错误,即验证通过,message = ‘’;

PS:其实element-ui依赖了async-validator这个库。具体可以去看下它的用法。