vue elementui form表單驗證

最近我們公司將前端框架由easyui 改為 vue+elementui 。自學vue兩周 就開始了爬坑之路。業余時間給大家分享一下心得，技術新手加上第一次分享(小激動)，有什么不足的地方歡迎大家指正，多多交流才能共同進步！

1.問題 我們公司的項目比較大 表格 表單的頁面都不勝數 ，基於此封裝了一些 可復用的代碼。

2.分析  vue給了我們不一樣的前端代碼體驗  element ui 給我們一套功能強大的組件 減少了我們大量的開發時間 。雙劍合璧 天下無敵！  但每個公司的代碼風格不同  用戶的要求也比較刁端 ui團隊設計完美 我們怎樣才能用這個兩把劍闖出自己的江湖 就需要大家好好琢磨了。

廢話不多說！進入正題 

form表單驗證規則的封裝 

  1.ellementui的處理    1. Form 組件上一次性傳遞所有的驗證規則  2 .單個的表單域上傳遞屬性的驗證規則 。

   

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="郵箱"
    :rules="[
      { required: true, message: '請輸入郵箱地址', trigger: 'blur' },
      { type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur,change' }
    ]"
  >
  <el-input v-model="dynamicValidateForm.mobil"></el-input>
 </el-form-item>
 <el-form-item 
    label="姓名:" 
    prop="name" 
    :rules="[{ required: true, message: '請輸入姓名', trigger: 'blur' }]">
 <el-input v-model="dynamicValidateForm.name"></el-input>
</el-form-item>
<el-form-item label="手機號:" prop="mobil" 
    :rules="filter_rules({required:true,type:'mobile'})">
    <el-input v-model="dynamicValidateForm.mobil"></el-input>
</el-form-item>

</el-form>

觀察上面的代碼 有一個共性 單個的表單域上傳遞屬性的驗證規則 ，給rules 屬性一個數組 

重點來了 19行代碼是什么意思？？？？ 

　這就是我們封裝的全局可復用的方法   傳入需要的參數,你就可以得到你想要的驗證規則 rules 數組

在我們的工具包建一個 js文件  我們的全局方法就有了

exports.install = function (Vue, options) {

    Vue.prototype.filter_rules = function (item){   
    
        return  [{},{}]
       
     }
    

}    

還要在main.js 中注冊 

下面分享下我的js文件

import { validateMoneyNumber,qq,mobile,regexn,integer} from '@/utils/validate'

exports.install = function (Vue, options) {
    
    
    /**
     * 注意:  定義type 規則時 不用做非空驗證 
     *        只需要傳入 required:true 即可
     * */
    /*保留兩位小數*/
    const isvalidateMoney = (rule, value, callback) => {
        if(value != null && value != "") {
            if(!validateMoneyNumber(value)) {
            callback(new Error('請輸入正確的數字，最多保留兩位小數!'))
            } else {
                callback()
            }
        }
        else{
            callback();
        }
    }
    /*驗證QQ號碼*/
    const isvalidateQQ= (rule, value, callback) => {        
        if(value != null && value != "") {
            if(!qq(value)) {
                callback(new Error('您輸入的QQ號不正確!'))
            } else {
                callback()
            }
        }
        else{
            callback();
        }
    }
    /*驗證手機號*/
       const isvalidateMobile= (rule, value, callback) => {        
        if(value != null && value != "") {
            if(!mobile(value)) {
                callback(new Error('您輸入的手機號不正確!'))
            } else {
                callback()
            }
        }
        else{
            callback();
        }
    }
       
       /*含有非法字符(只能輸入字母、漢字)*/
       const isvalidateRegexn= (rule, value, callback) => {        
        if(value != null && value != "") {
            if(!regexn(value)) {
                callback(new Error('含有非法字符(只能輸入字母、漢字)!'))
            } else {
                callback()
            }
        }
        else{
            callback();
        }
    }
        /*請輸入正整數*/
       const isvalidateInteger= (rule, value, callback) => {        
        if(value != null && value != "") {
            if(!integer(value)) {
                callback(new Error('請輸入正整數!'))
            } else {
                callback()
            }
        }
        else{
            callback();
        }
    }
    
    
    
    
    /**
     * 參數 item 
     * required true  必填項
     * maxLength  字符串的最大長度
     * min 和 max 必須同時給 min < max  type=number
     * type 手機號 mobile
     *      郵箱   email
     *      網址   url 
     *      各種自定義類型   定義在 src/utils/validate 中    持續添加中.......
     * */
    
    Vue.prototype.filter_rules = function (item){
        let rules = [];
        if(item.required){
           rules.push({ required: true, message: '該輸入項為必填項!', trigger: 'blur' });
        }
        if(item.maxLength){
           rules.push({ min:1,max:item.maxLength, message: '最多輸入'+item.maxLength+'個字符!', trigger: 'blur' })
        }
        if(item.min&&item.max){       
           rules.push({ min:item.min,max:item.max, message: '字符長度在'+item.min+'至'+item.max+'之間!', trigger: 'blur' })
        }
        if(item.type){
            let type = item.type;
            switch(type) {
                case 'email':
                    rules.push({ type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur,change'  });
                    break;
                case 'qq':
                    rules.push( { validator: isvalidateQQ, trigger: 'blur,change' });
                    break;
                case 'mobile':
                    rules.push( { validator: isvalidateMobile, trigger: 'blur,change' });
                    break;    
                case 'regexn':
                    rules.push( { validator: isvalidateRegexn, trigger: 'blur,change' });
                    break;    
                case 'integer':
                    rules.push( { validator: isvalidateInteger, trigger: 'blur,change' });
                    break;        
                default:
                    rule.push({});
                    break;
            }
        }
       
     
        return rules;
    };
};

看明白了嗎  第一行  是引入各種正則表達式   然后自定義校驗規則    。  傳入你自定義的參數 就可以拿到你想要的規則   （很熟悉吧  參考 easyui 表單驗證）

下面是效果

歡迎來交流哦！