溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
最近我們公司將前端框架由easyui 改為 vue+elementui 。自學(xué)vue兩周 就開始了爬坑之路。業(yè)余時(shí)間給大家分享一下心得，技術(shù)新手加上第一次分享(小激動(dòng))，有什么不足的地方歡迎大家指正，多多交流才能共同進(jìn)步！
1.問題 我們公司的項(xiàng)目比較大 表格 表單的頁(yè)面都不勝數(shù) ，基于此封裝了一些 可復(fù)用的代碼。
2.分析 vue給了我們不一樣的前端代碼體驗(yàn) element ui 給我們一套功能強(qiáng)大的組件 減少了我們大量的開發(fā)時(shí)間 。雙劍合璧 天下無(wú)敵！ 但每個(gè)公司的代碼風(fēng)格不同 用戶的要求也比較刁端 ui團(tuán)隊(duì)設(shè)計(jì)完美 我們?cè)鯓硬拍苡眠@個(gè)兩把劍闖出自己的江湖 就需要大家好好琢磨了。
廢話不多說(shuō)！進(jìn)入正題
form表單驗(yàn)證規(guī)則的封裝
1.ellementui的處理 1. Form 組件上一次性傳遞所有的驗(yàn)證規(guī)則 2 .單個(gè)的表單域上傳遞屬性的驗(yàn)證規(guī)則 。
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="郵箱"
:rules="[
{ required: true, message: '請(qǐng)輸入郵箱地址', trigger: 'blur' },
{ type: 'email', message: '請(qǐng)輸入正確的郵箱地址', trigger: 'blur,change' }
]"
>
<el-input v-model="dynamicValidateForm.mobil"></el-input>
</el-form-item>
<el-form-item
label="姓名:"
prop="name"
:rules="[{ required: true, message: '請(qǐng)輸入姓名', trigger: 'blur' }]">
<el-input v-model="dynamicValidateForm.name"></el-input>
</el-form-item>
<el-form-item label="手機(jī)號(hào):" prop="mobil"
:rules="filter_rules({required:true,type:'mobile'})">
<el-input v-model="dynamicValidateForm.mobil"></el-input>
</el-form-item>
</el-form>
觀察上面的代碼 有一個(gè)共性 單個(gè)的表單域上傳遞屬性的驗(yàn)證規(guī)則 ，給rules 屬性一個(gè)數(shù)組
重點(diǎn)來(lái)了 19行代碼是什么意思？？？？
這就是我們封裝的全局可復(fù)用的方法 傳入需要的參數(shù),你就可以得到你想要的驗(yàn)證規(guī)則 rules 數(shù)組
在我們的工具包建一個(gè) js文件 我們的全局方法就有了
exports.install = function (Vue, options) {
Vue.prototype.filter_rules = function (item){
return [{},{}]
}
}
還要在main.js 中注冊(cè)
下面分享下我的js文件
import { validateMoneyNumber,qq,mobile,regexn,integer} from '@/utils/validate'
exports.install = function (Vue, options) {
/**
* 注意: 定義type 規(guī)則時(shí) 不用做非空驗(yàn)證
* 只需要傳入 required:true 即可
* */
/*保留兩位小數(shù)*/
const isvalidateMoney = (rule, value, callback) => {
if(value != null && value != "") {
if(!validateMoneyNumber(value)) {
callback(new Error('請(qǐng)輸入正確的數(shù)字，最多保留兩位小數(shù)!'))
} else {
callback()
}
}
else{
callback();
}
}
/*驗(yàn)證QQ號(hào)碼*/
const isvalidateQQ= (rule, value, callback) => {
if(value != null && value != "") {
if(!qq(value)) {
callback(new Error('您輸入的QQ號(hào)不正確!'))
} else {
callback()
}
}
else{
callback();
}
}
/*驗(yàn)證手機(jī)號(hào)*/
const isvalidateMobile= (rule, value, callback) => {
if(value != null && value != "") {
if(!mobile(value)) {
callback(new Error('您輸入的手機(jī)號(hào)不正確!'))
} else {
callback()
}
}
else{
callback();
}
}
/*含有非法字符(只能輸入字母、漢字)*/
const isvalidateRegexn= (rule, value, callback) => {
if(value != null && value != "") {
if(!regexn(value)) {
callback(new Error('含有非法字符(只能輸入字母、漢字)!'))
} else {
callback()
}
}
else{
callback();
}
}
/*請(qǐng)輸入正整數(shù)*/
const isvalidateInteger= (rule, value, callback) => {
if(value != null && value != "") {
if(!integer(value)) {
callback(new Error('請(qǐng)輸入正整數(shù)!'))
} else {
callback()
}
}
else{
callback();
}
}
/**
* 參數(shù) item
* required true 必填項(xiàng)
* maxLength 字符串的最大長(zhǎng)度
* min 和 max 必須同時(shí)給 min < max type=number
* type 手機(jī)號(hào) mobile
* 郵箱 email
* 網(wǎng)址 url
* 各種自定義類型 定義在 src/utils/validate 中 持續(xù)添加中.......
* */
Vue.prototype.filter_rules = function (item){
let rules = [];
if(item.required){
rules.push({ required: true, message: '該輸入項(xiàng)為必填項(xiàng)!', trigger: 'blur' });
}
if(item.maxLength){
rules.push({ min:1,max:item.maxLength, message: '最多輸入'+item.maxLength+'個(gè)字符!', trigger: 'blur' })
}
if(item.min&&item.max){
rules.push({ min:item.min,max:item.max, message: '字符長(zhǎng)度在'+item.min+'至'+item.max+'之間!', trigger: 'blur' })
}
if(item.type){
let type = item.type;
switch(type) {
case 'email':
rules.push({ type: 'email', message: '請(qǐng)輸入正確的郵箱地址', 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;
};
};
看明白了嗎 第一行 是引入各種正則表達(dá)式 然后自定義校驗(yàn)規(guī)則 。 傳入你自定義的參數(shù) 就可以拿到你想要的規(guī)則 （很熟悉吧 參考 easyui 表單驗(yàn)證）
下面是效果
ElementUi rules表單驗(yàn)證
rules: {
name:[{
required: true,
message: '請(qǐng)輸入用戶名',
trigger: 'blur'
},{
min: 2,
max: 5,
message: '長(zhǎng)度在 2 到 5 個(gè)字符'
},{
pattern: /^[\u4E00-\u9FA5]+$/,
message: '用戶名只能為中文'
}
//{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母開頭，長(zhǎng)度在2-5之間， 只能包含字符、數(shù)字和下劃線'}
],
password: [{
required: true,
message: '請(qǐng)輸入密碼',
trigger: 'blur'
}, {
min: 6,
max: 30,
message: '長(zhǎng)度在 6 到 30 個(gè)字符'
}, {
pattern: /^(\w){6,20}$/,
message: '只能輸入6-20個(gè)字母、數(shù)字、下劃線'
}],
mobile:[{
required: true,
message: '請(qǐng)輸入手機(jī)號(hào)碼',
trigger: 'blur'
},
{validator:function(rule,value,callback){
if(/^1[34578]\d{9}$/.test(value) == false){
callback(new Error("請(qǐng)輸入正確的手機(jī)號(hào)"));
}else{
callback();
}
}, trigger: 'blur'}
],
// pattern: /^1[34578]\d{9}$/, message: '目前只支持中國(guó)大陸的手機(jī)號(hào)碼' }
peopleID:[{
required: true,
message: '請(qǐng)輸入身份證ID',
trigger: 'blur'
},{
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份證格式不正確'
}
],
carId:[
{required: true, message: '請(qǐng)輸入車牌號(hào)', 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}[掛學(xué)警軍港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9掛學(xué)警軍港澳]{1}$)/,
message: '常規(guī)格式：晉B12345'},
],
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼