iview Form 表单验证小结

Form由一些FomeItem组成，可以为Form设置rule来指定相关表单项的限制条件。
通过$ref 可以访问到 Form 组件，调用 validate 函数，即可获取相应的校验函数。iview中，Form验证是根据FormItem的prop属性来验证。
在编写校验函数前，首先需要了解表单验证相关知识，参看iview组件中使用的异步表单验证插件 async-validator

validate function(source, [options], callback)
即function( 验证对象（必须）, 验证选项（可选）, 回调函数（必须）)
rule function(rule, value, callback, source, options)
type 验证类型的限制，默认为string，全类型type如图

一个栗子：
const validateNameList = (rule, value, callback) => {
if (value.length === 0) {
callback(new Error('请选择name'));
} else {
callback();
}
};
validateAdvancedFormItem: {
// 对于单个字段来说，通常需要多个验证规则，这些规则以数组展示
name: [
{ required: true, message: '任务名称不能为空', trigger: 'blur' },
{ type: 'string', max: 20, message: '不能超过20个字符', trigger: 'blur' },
],
nameList: [
{ required: true, type: 'array', message: '请选择nameList', trigger: 'blur' },
{ validator: validateBusiness, trigger: 'blur' },
]
endTimeVal: [
{ required: true, type: 'date', message: '请选择结束时间', trigger: 'change' }
],

noVerify:[{ required: true, validator: noVerify }], // 自带的验证器不能满足要求时，需要我们自定义验证器
},

记录踩过的坑
input 默认输入为String类型
如果在表单验证中声明 type：number，建议input中加上number属性，将用户的输入自动转换为 Number 类型。
select 单选多选
提示： 单选返回的是一个项，而多选返回的是数组。
dataPicker v-model失效
必须on-change返回并赋值才能实现数据绑定，否则:value无法捕捉日期的而选择变动。

前两天写后台管理系统，写的我都不知道自己是谁了，太复杂了，尤其是在用iview和vue写的时候就更不好搞了，之前用iview做验证的时候也是费了我很大的力气，这几天稍微闲一点，我要把这一点点经验告诉大家，希望能帮到大家。

<i-form ref= 'formItem' :model="formItem" :rules='ruleValidate'>
<form-item label="用户名称" prop='username' >
<i-input v-model="formItem.username" placeholder="请输入用户名"></i-input>
</form-item>
<form-item label="用户密码" prop="password">
<i-input v-model="formItem.password" type="password"></i-input>
</form-item>
<form-item label="再次密码" prop="rpassword">
<i-input v-model="formItem.rpassword" type="password"></i-input>
</form-item>
<form-item label="用户组" prop="group">
<i-select v-model="formItem.group">
<i-option value="0">选择用户组</i-option>
<i-option v-for="item in group" :value="item.id">{{item.typename}}</i-option>
</i-select>
</form-item>
<form-item label="用户名称" prop='nick'>
<i-input v-model="formItem.nick" placeholder="请输入昵称"></i-input>
</form-item>
<form-item label="联系电话">
<i-input v-model="formItem.tel" placeholder="请输入电话"></i-input>
</form-item>
<form-item label="联系 Q Q">
<i-input v-model="formItem.qq" ></i-input>
</form-item>
</i-form>

上面这个是html部分用的是iview的表单组件，做验证的得时候首先里面的ref,model,rules是不能缺少的，其次就是里面加上prop属性，用vue的话v-model必不可少。

var vue= new Vue({
el: '#addModule',
data(){
var validateuser = function(rule, value, callback){
if(!value){
return callback(new Error("请输入用户名"));
}else if(!/^[a-zA-Z\d]+$/.test(value)){
return callback(new Error("请正确输入用户名"))
}else{
callback();
}
};
var validatenick = function(rule, value, callback){
if(!value){
return callback(new Error("请输入用户名称"));
}else if(!/^[\u4e00-\u9fa5]+$/.test(value)){
return callback(new Error("请正确输入用户名称"))
}else{
callback();
}
};
var validatePass = function(rule, value, callback) {
if (value === '') {
callback(new Error('请输入密码'));
} else {
callback();
}
};
var validatePassCheck = function(rule, value, callback){
if (value === '') {
return callback(new Error('请再次输入密码'));
} else if (value !== vue.formItem.password) {
return callback(new Error('两次密码不一致'));
} else {
callback();
}
};
return{
group:[],
formItem:{
'username':"",
'password':"",
'rpassword':"",
'nick':'',
'tel':"",
'qq':"",
'group':""
},
ruleValidate:{
username : [{validator: validateuser,trigger: 'blur'}],
nick : [{validator: validatenick,trigger: 'blur'}],
password : [{validator: validatePass, trigger: 'blur' },{min:6,message:'请输入最少6位'}],
rpassword : [{validator: validatePassCheck, trigger: 'blur' },{min:6,message:'请输入最少6位'}],
group:[{required: true, type: 'string', message: '请选择分组', trigger: 'change'}],
}
}
},
上面的是js部分，验证的信息写在data里面，然后在return里面调用，写好的验证规则要在validator(验证器)里面调用，后面的trigger是什么时候触发。
嗯就是这样了，刚开始自己自己琢磨的时候，确实很难，后来做出来之后就差不多明了了。