資訊專欄INFORMATION COLUMN
摘要：表單驗(yàn)證可以在中書寫正則，并且配合進(jìn)行表單驗(yàn)證。屬性規(guī)定用于驗(yàn)證輸入字段的模式。
ElementUi 表單驗(yàn)證
可以在pattern中書寫正則，并且配合elementUI進(jìn)行表單驗(yàn)證。
pattern 屬性規(guī)定用于驗(yàn)證輸入字段的模式。模式指的是正則表達(dá)式。
rules: {
name:[{
required: true,
message: "請(qǐng)輸入用戶名",
trigger: "blur"
},{
min: 2,
max: 5,
message: "長度在 2 到 5 個(gè)字符"
},{
pattern: /^[u4E00-u9FA5]+$/,
message: "用戶名只能為中文"
}
//{ pattern:/^[a-zA-Z]w{1,4}$/, message: "以字母開頭，長度在2-5之間， 只能包含字符、數(shù)字和下劃線"}
],
password: [{
required: true,
message: "請(qǐng)輸入密碼",
trigger: "blur"
}, {
min: 6,
max: 30,
message: "長度在 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: "目前只支持中國大陸的手機(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-9u4E00-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"},
],
},
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90367.html
摘要：是否必填，如不設(shè)置，則會(huì)根據(jù)校驗(yàn)規(guī)則自動(dòng)生成不太清楚為啥要這么寫，這里是指定自己寫的規(guī)則。在自己寫的方法中，可以將公共方法給調(diào)用進(jìn)來這里的代表表單域驗(yàn)證錯(cuò)誤信息設(shè)置該值會(huì)使表單驗(yàn)證狀態(tài)變?yōu)?，并顯示該錯(cuò)誤信息 以下代碼是借用鏈接描述 showImg(https://segmentfault.com/img/bVYu9N?w=652&h=32);一般我們?cè)谑褂胑lementUI來實(shí)現(xiàn)一個(gè)表...
摘要：自定義校驗(yàn)方法因?yàn)槲业捻?xiàng)目是分情況可以選擇是否有圖所以我定義了一個(gè)變量當(dāng)他為的時(shí)候才會(huì)要求上傳走這個(gè)校驗(yàn)方法里聲明這個(gè)方法圖片驗(yàn)證請(qǐng)上傳圖片圖片驗(yàn)證根據(jù)情況去切換的值就可以控制是否校驗(yàn)失敗啦這就是校驗(yàn)圖片的思路了是不是很簡單呢再來說說表單帶 自定義校驗(yàn)方法,因?yàn)槲业捻?xiàng)目是,分情況,可以選擇是否有圖,所以我定義了一個(gè)變量hasFmt,當(dāng)他為false的時(shí)候,才會(huì)要求上傳,走這個(gè)校驗(yàn)方法,...
摘要：策略模式又稱政策模式，其定義一系列的算法，把它們一個(gè)個(gè)封裝起來，并且使它們可以互相替換。的表單具有表單驗(yàn)證功能，用來校驗(yàn)用戶輸入的表單內(nèi)容。實(shí)際需求中表單驗(yàn)證項(xiàng)一般會(huì)比較復(fù)雜，所以需要給每個(gè)表單項(xiàng)增加自定義校驗(yàn)方法。 showImg(https://segmentfault.com/img/remote/1460000020135990); 策略模式 （Strategy Pattern...
摘要：介紹基于開發(fā)的一款表單設(shè)計(jì)器，提高表單開發(fā)效率的利器，讓開發(fā)者從枯燥的表單代碼編寫中解放出來工具地址地址特性可視化配置頁面提供柵格布局，并采用實(shí)現(xiàn)對(duì)齊一鍵預(yù)覽配置的效果一鍵生成配置數(shù)據(jù)一鍵生成代碼，立即可運(yùn)行提供自定義組件滿足用戶自定義 介紹 基于Vue,ElementUI開發(fā)的一款表單設(shè)計(jì)器，提高表單開發(fā)效率的利器，讓開發(fā)者從枯燥的表單代碼編寫中解放出來 工具地址：http://to...
摘要：表單配置校驗(yàn)配置屬性流配置生成表單交互技術(shù)棧特性支持自定義屬性支持基于的值校驗(yàn)支持父子屬性支持屬性流程設(shè)置支持多值數(shù)據(jù)庫設(shè)計(jì)關(guān)鍵數(shù)據(jù)結(jié)構(gòu)屬性對(duì)象中文名英文名短名是否復(fù)合對(duì)象數(shù)據(jù)類型描述排序是否有效校驗(yàn)規(guī)則是否支持流屬性是否為流屬性是否支持 demo: 表單配置showImg(https://segmentfault.com/img/bVbci1F?w=1730&h=406);校驗(yàn)配置s...
閱讀 2881·2019-08-30 15:44
閱讀 1913·2019-08-29 13:59
閱讀 2852·2019-08-29 12:29
閱讀 1099·2019-08-26 13:57
閱讀 3211·2019-08-26 13:45
閱讀 3342·2019-08-26 10:28
閱讀 857·2019-08-26 10:18
閱讀 1706·2019-08-23 16:52
