iview自定义表单验证

前两天写后台管理系统，写的我都不知道自己是谁了，太复杂了，尤其是在用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是什么时候触发。
嗯就是这样了，刚开始自己自己琢磨的时候，确实很难，后来做出来之后就差不多明了了。