layui 表單標(biāo)簽的校驗(yàn)方法
更新時(shí)間：2019年09月04日 09:40:38 作者：黃寶康
今天小編就為大家分享一篇layui 表單標(biāo)簽的校驗(yàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
layui表單元素的校驗(yàn)只需在元素上加入lay-verify，layui提供了以下值。
required（必填項(xiàng)） phone（手機(jī)號） 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()方法對pass進(jìn)行一個(gè)校驗(yàn)規(guī)則的定義
示例：
<div class="layui-form-item"> <label for="" class="layui-form-label">請輸入郵件</label> <div class="layui-input-block"> <input type="text" placeholder="請輸入郵件" 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對象
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="請輸入用戶名"> <input type="password" lay-verify="pass" placeholder="請輸入密碼">
以上這篇layui 表單標(biāo)簽的校驗(yàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JavaScript實(shí)現(xiàn)可拖拽的進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)可拖拽的進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
從零開始做一個(gè)pagination分頁組件，這篇文章主要介紹了pagination分頁組件的制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
返回字符串的字節(jié)長度 檢查表單是否符合規(guī)定的長度 等表達(dá)驗(yàn)證函數(shù)2009-04-04
這篇文章總結(jié)了JavaScript的一些簡寫技巧，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
小程序?qū)崿F(xiàn)左滑刪除的效果的實(shí)例代碼
這篇文章主要介紹了小程序?qū)崿F(xiàn)左滑刪除的效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)之使用云函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了微信小程序上傳多圖到服務(wù)器并獲取返回的路徑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
微信小程序bindtap與catchtap的區(qū)別詳解
本文主要介紹了微信小程序bindtap與catchtap的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要對js中script標(biāo)簽中的預(yù)解析進(jìn)行詳細(xì)介紹。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2016-12-12
js和jquery設(shè)置disabled屬性為true使按鈕失效
這篇文章主要介紹了js和jquery使按鈕失效的方法,需要的朋友可以參考下2014-08-08