vue elementui form表單驗證

時間 2019-12-14

原文原文鏈接

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

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

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

廢話很少說！進入正題數組

form表單驗證規則的封裝 前端框架

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

 1 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
 2   <el-form-item
 3     prop="email"
 4     label="郵箱"
 5     :rules="[
 6       { required: true, message: '請輸入郵箱地址', trigger: 'blur' },
 7       { type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur,change' }
 8     ]"
 9   >
10   <el-input v-model="dynamicValidateForm.mobil"></el-input>
11  </el-form-item>
12  <el-form-item 
13     label="姓名:" 
14     prop="name" 
15     :rules="[{ required: true, message: '請輸入姓名', trigger: 'blur' }]">
16  <el-input v-model="dynamicValidateForm.name"></el-input>
17 </el-form-item>
18 <el-form-item label="手機號:" prop="mobil" 
19     :rules="filter_rules({required:true,type:'mobile'})">
20     <el-input v-model="dynamicValidateForm.mobil"></el-input>
21 </el-form-item>
22 
23 </el-form>

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

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

　這就是咱們封裝的全局可複用的方法傳入須要的參數,你就能夠獲得你想要的驗證規則 rules 數組url

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

 1 exports.install = function (Vue, options) {
 2 
 3     Vue.prototype.filter_rules = function (item){   
 4     
 5         return  [{},{}]
 6        
 7      }
 8     
 9 
10 }

還要在main.js 中註冊

下面分享下個人js文件

  1 import { validateMoneyNumber,qq,mobile,regexn,integer} from '@/utils/validate'
  2 
  3 exports.install = function (Vue, options) {
  4     
  5     
  6     /**
  7      * 注意:  定義type 規則時 不用作非空驗證 
  8      *        只須要傳入 required:true 便可
  9      * */
 10     /*保留兩位小數*/
 11     const isvalidateMoney = (rule, value, callback) => {
 12         if(value != null && value != "") {
 13             if(!validateMoneyNumber(value)) {
 14             callback(new Error('請輸入正確的數字，最多保留兩位小數!'))
 15             } else {
 16                 callback()
 17             }
 18         }
 19         else{
 20             callback();
 21         }
 22     }
 23     /*驗證QQ號碼*/
 24     const isvalidateQQ= (rule, value, callback) => {        
 25         if(value != null && value != "") {
 26             if(!qq(value)) {
 27                 callback(new Error('您輸入的QQ號不正確!'))
 28             } else {
 29                 callback()
 30             }
 31         }
 32         else{
 33             callback();
 34         }
 35     }
 36     /*驗證手機號*/
 37        const isvalidateMobile= (rule, value, callback) => {        
 38         if(value != null && value != "") {
 39             if(!mobile(value)) {
 40                 callback(new Error('您輸入的手機號不正確!'))
 41             } else {
 42                 callback()
 43             }
 44         }
 45         else{
 46             callback();
 47         }
 48     }
 49        
 50        /*含有非法字符(只能輸入字母、漢字)*/
 51        const isvalidateRegexn= (rule, value, callback) => {        
 52         if(value != null && value != "") {
 53             if(!regexn(value)) {
 54                 callback(new Error('含有非法字符(只能輸入字母、漢字)!'))
 55             } else {
 56                 callback()
 57             }
 58         }
 59         else{
 60             callback();
 61         }
 62     }
 63         /*請輸入正整數*/
 64        const isvalidateInteger= (rule, value, callback) => {        
 65         if(value != null && value != "") {
 66             if(!integer(value)) {
 67                 callback(new Error('請輸入正整數!'))
 68             } else {
 69                 callback()
 70             }
 71         }
 72         else{
 73             callback();
 74         }
 75     }
 76     
 77     
 78     
 79     
 80     /**
 81      * 參數 item 
 82      * required true  必填項
 83      * maxLength  字符串的最大長度
 84      * min 和 max 必須同時給 min < max  type=number
 85      * type 手機號 mobile
 86      *      郵箱   email
 87      *      網址   url 
 88      *      各類自定義類型   定義在 src/utils/validate 中    持續添加中.......
 89      * */
 90     
 91     Vue.prototype.filter_rules = function (item){
 92         let rules = [];
 93         if(item.required){
 94            rules.push({ required: true, message: '該輸入項爲必填項!', trigger: 'blur' });
 95         }
 96         if(item.maxLength){
 97            rules.push({ min:1,max:item.maxLength, message: '最多輸入'+item.maxLength+'個字符!', trigger: 'blur' })
 98         }
 99         if(item.min&&item.max){       
100            rules.push({ min:item.min,max:item.max, message: '字符長度在'+item.min+'至'+item.max+'之間!', trigger: 'blur' })
101         }
102         if(item.type){
103             let type = item.type;
104             switch(type) {
105                 case 'email':
106                     rules.push({ type: 'email', message: '請輸入正確的郵箱地址', trigger: 'blur,change'  });
107                     break;
108                 case 'qq':
109                     rules.push( { validator: isvalidateQQ, trigger: 'blur,change' });
110                     break;
111                 case 'mobile':
112                     rules.push( { validator: isvalidateMobile, trigger: 'blur,change' });
113                     break;    
114                 case 'regexn':
115                     rules.push( { validator: isvalidateRegexn, trigger: 'blur,change' });
116                     break;    
117                 case 'integer':
118                     rules.push( { validator: isvalidateInteger, trigger: 'blur,change' });
119                     break;        
120                 default:
121                     rule.push({});
122                     break;
123             }
124         }
125        
126      
127         return rules;
128     };
129 };