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' }
        ],

}