layui 表單標(biāo)簽的校驗(yàn)方法
更新時(shí)間：2019年09月04日 09:40:38 作者：黃寶康
今天小編就為大家分享一篇layui 表單標(biāo)簽的校驗(yàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
layui表單元素的校驗(yàn)只需在元素上加入lay-verify，layui提供了以下值。
required（必填項(xiàng)） phone（手機(jī)號(hào)） email（郵箱） url（網(wǎng)址） number（數(shù)字） date（日期） identity（身份證） 自定義值
同時(shí)支持多條規(guī)則的驗(yàn)證，格式：lay-verify=”驗(yàn)證A|驗(yàn)證B”
如：lay-verify=”required|phone|number”
另外，除了我們內(nèi)置的校驗(yàn)規(guī)則，你還可以給他設(shè)定任意的值，比如lay-verify=”pass”，那么你就需要借助form.verify()方法對(duì)pass進(jìn)行一個(gè)校驗(yàn)規(guī)則的定義
示例：
<div class="layui-form-item"> <label for="" class="layui-form-label">請(qǐng)輸入郵件</label> <div class="layui-input-block"> <input type="text" placeholder="請(qǐng)輸入郵件" lay-verify="email" class="layui-input"> </div> </div>
填入非法郵件時(shí)，點(diǎn)擊提交會(huì)有笑臉圖標(biāo)提示，挺棒的！
自定義校驗(yàn)：
form.verify({
username: function(value, item){ //value：表單的值、item：表單的DOM對(duì)象
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
return '用戶名不能有特殊字符';
}
if(/(^\_)|(\__)|(\_+$)/.test(value)){
return '用戶名首尾不能出現(xiàn)下劃線\'_\'';
}
if(/^\d+\d+\d$/.test(value)){
return '用戶名不能全為數(shù)字';
}
}
//我們既支持上述函數(shù)式的方式，也支持下述數(shù)組的形式
//數(shù)組的兩個(gè)值分別代表：[正則匹配、匹配不符時(shí)的提示文字]
,pass: [
/^[\S]{6,12}$/
,'密碼必須6到12位，且不能出現(xiàn)空格'
]
});
當(dāng)你自定義了類似上面的驗(yàn)證規(guī)則后，你只需要把key賦值給輸入框的 lay-verify 屬性即可：
<input type="text" lay-verify="username" placeholder="請(qǐng)輸入用戶名"> <input type="password" lay-verify="pass" placeholder="請(qǐng)輸入密碼">
以上這篇layui 表單標(biāo)簽的校驗(yàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
谷歌showModalDialog()方法不兼容出現(xiàn)對(duì)話窗口的解決辦法
這篇文章給大家介紹了谷歌showModalDialog()方法不兼容出現(xiàn)對(duì)話窗口的解決辦法，解決辦法非常好，感興趣的朋友可以參考下2016-02-02
JS圖片自動(dòng)輪換效果實(shí)現(xiàn)思路附截圖
這篇文章主要介紹了JS實(shí)現(xiàn)的圖片自動(dòng)輪換效果，有具體的實(shí)現(xiàn)思路及截圖，希望對(duì)大家學(xué)習(xí)有所幫助2014-04-04
javascript 漢字與拼音轉(zhuǎn)換...2007-02-02
編程世界里只存在兩種基本元素，一個(gè)是數(shù)據(jù)，一個(gè)是代碼。編程世界就是在數(shù)據(jù)和代碼千絲萬縷的糾纏中呈現(xiàn)出無限的生機(jī)和活力。2008-03-03
JavaScript中window和document用法詳解
這篇文章主要介紹了JavaScript中window和document用法詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
javascript中強(qiáng)制執(zhí)行toString()具體實(shí)現(xiàn)
Javascript通常會(huì)根據(jù)方法或運(yùn)算符的需要而自動(dòng)把值轉(zhuǎn)成所需的類型，這可能導(dǎo)致各種錯(cuò)誤，接下來為大家介紹下javascript如何強(qiáng)制執(zhí)行toString()，感興趣的朋友可以參考下哈2013-04-04
既然說到了JavaScript,那么就會(huì)繞不過去執(zhí)行上下文,只有理解了執(zhí)行上下文才能更好的理解JavaScript本身,不過本部分不是專門講解?JavaScript的,主要從JavaScript的執(zhí)行順序開始介紹一下JavaScript是怎樣運(yùn)行的2023-09-09
這篇文章主要介紹了javascript的2種繼承方式,分析對(duì)象冒充和原型鏈方式的不同,需要的朋友可以參考下2014-03-03
解決ueditor jquery javascript 取值問題
這篇文章主要介紹了解決ueditor jquery javascript 取值問題,需要的朋友可以參考下2014-12-12
JavaScript面向?qū)ο蟮膶?shí)現(xiàn)方法小結(jié)
這篇文章主要介紹了JavaScript面向?qū)ο蟮膶?shí)現(xiàn)方法,實(shí)例總結(jié)了兩種常見的面向?qū)ο蟮膶?shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04