最近我們公司將前端框架由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 表單驗證）
下面是效果
ElementUi rules表單驗證
rules: { name:[{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 2, max: 5, message: '長度在 2 到 5 個字符' },{ pattern: /^[/u4E00-/u9FA5]+$/, message: '用戶名只能為中文' } //{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母開頭，長度在2-5之間， 只能包含字符、數字和下劃線'} ], password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }, { min: 6, max: 30, message: '長度在 6 到 30 個字符' }, { pattern: /^(/w){6,20}$/, message: '只能輸入6-20個字母、數字、下劃線' }], mobile:[{ required: true, message: '請輸入手機號碼', trigger: 'blur' }, {validator:function(rule,value,callback){ if(/^1[34578]/d{9}$/.test(value) == false){ callback(new Error("請輸入正確的手機號")); }else{ callback(); } }, trigger: 'blur'} ], // pattern: /^1[34578]/d{9}$/, message: '目前只支持中國大陸的手機號碼' } peopleID:[{ required: true, message: '請輸入身份證ID', trigger: 'blur' },{ pattern:/(^/d{15}$)|(^/d{18}$)|(^/d{17}(/d|X|x)$)/, message: '你的身份證格式不正確' } ], carId:[ {required: true, message: '請輸入車牌號', trigger: 'blur'}, {pattern:/(^[/u4E00-/u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9/u4E00-/u9FA5]{1}[A-Z0-9]{4}$)|(^[/u4E00-/u9FA5]{1}[A-Z0-9]{5}[掛學警軍港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9掛學警軍港澳]{1}$)/, message: '常規格式：晉B12345'}, ],},以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
