vue中的表单异步校验方法封装

在vue项目的开发中，表单的验证必不可少，在开发的过程中，用的是vue+iview的一套，我们知道iview的表单验证是基于async-validator，对于async-validator不熟悉的可以去官网看看，https://github.com/yiminghe/async-validator；

1.普通的自定义验证

<Col span="24">
    <FormItem 
         label="确认密码" 
         prop="passwordrepeat" 
         class="login-bottom">
        <Input 
             type="password" 
             v-model="formInline.passwordrepeat" 
             placeholder="再输一次">                               
         </Input>
    </FormItem>
</Col>

其中prop是必须的，所有的验证都是基于prop来进行的，

先在data里面定义方法validatePassCheck 如下：

const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
                callback(new Error('请再次输入密码'));
        } else if (value !== this.formInline.password) {
                callback(new Error('两次密码输入不一致'));
        } else {
                callback();
        }
};

接着写验证条件，把上面的方法写到validator

ruleInline: {     
         passwordrepeat: [
                 {  validator: validatePassCheck,required: true,  trigger: 'blur' },
                 { type: 'string', min: 4, message: '内容太短', trigger: 'blur' }
         ],
                

},

这样存在的问题就是每个都要创建这个方法，会显得很麻烦，于是我们需要封装一个通用的函数来做异步校验

/*
**异步校验表单重复的方法
**传入json的格式
json={
url:'ssss', //验证需要的url
method:'get', //默认get方法
tip:'存储名称重复' //不写默认提示
response:exist //后端get方法返回重复提示的字段，默认为exist，exist为true代表重复
}
*/


Vue.prototype.checkBackNameRepeat = (json) => {
          let url = json.url;
          let editName = ""
　　　　　　//利用闭包返回一个函数，因为在vue文件中自定义的验证必须是个函数，闭包帮我们保存一些需要的东西
          return function(rule, value, callback){//这三个参数是验证函数必须传入的，可以参考以上的validatePasscheck函数
            let _url = url;
            _url = _url.replace("{value}", value);
            /*保存后端第一次返回数据，本次数据在编辑状态下不能算重复*/
            if(json.edit && !editName){
              editName = value;
            }
            if(editName == value){
              callback();
              return;
            }
　　　　　　　　//head方法，返回404则代表不重复，否则就是重复
            if( json.method && json.method.toUpperCase() === 'HEAD' ){
              axios.head( _url ).then( (e) => {
                callback( new Error( json.tip?json.tip:'名称重复' ) );//callback运行带有参数代表验证不通过
              },( err)=>{
                callback();//callback运行无参数代表验证通过
              })
　　　　　　　　//剩下就是get方法，返回指定的条件才是重复和不重复的区别
            }else{
              axios.get( _url ).then( (e) => {
                if( e.data.response[json.response] || e.data.response.exist ){
                  callback( new Error( json.tip?json.tip:'名称重复' ) );
                }else{
                  callback();
                } 
              },( err ) => {
                callback();
              })
            }
          }
        }

上面写好了通用的方法后，在需要校验的vue文件引入该方法，然后在需要验证的字段的自定义验证validator执行这个方法，写入一些配置参数，该方法执行后会返回一个带三个参数的函数就是我们之前不封装需要的写法，如下，到目前，我们的异步校验封装就算完成了

rules:{
       name:[
            { required: true, message: '存储名称是必须的', trigger: 'blur' },
            { pattern:/^([a-z0-9]([a-z0-9-.]*)[a-z0-9])$|^([a-z0-9])$/, message: '只能输入小写字母、数字、点号.和横线-并且点号 . 和横线 - 不能在开头或结尾', trigger: 'blur' },
            { min:2, message:'名称太短!',trigger:'blur'},
            { max:50, message:'名称太长!',trigger:'blur'},
            { validator: this.checkBackNameRepeat({
                 url:"wave/v1/pvc/" + this.$store.state.token.UserNamespace + "/{value}",
                 method:'head',
                 tip:'存储名称重复',
                 response:'exist'
             }), trigger: 'blur' }
        ],

}

vue中的表单异步校验方法封装

相关推荐