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是什么时候触发。
嗯就是这样了，刚开始自己自己琢磨的时候，确实很难，后来做出来之后就差不多明了了。