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

2021年11月25日 阅读数:4
这篇文章主要向大家介绍vue中的表单异步校验方法封装,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

1.普通的自定义验证ios

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

其中prop是必须的,全部的验证都是基于prop来进行的,git

先在data里面定义方法validatePassCheck 以下:github

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

接着写验证条件,把上面的方法写到validatorjson

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

},

这样存在的问题就是每一个都要建立这个方法,会显得很麻烦,因而咱们须要封装一个通用的函数来作异步校验axios

/*
**异步校验表单重复的方法
**传入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' }
        ],

}