這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)使用layui怎么實現(xiàn)表單標(biāo)簽校驗,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)公司是一家專業(yè)提供寧武企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都網(wǎng)站建設(shè)、H5建站、小程序制作等業(yè)務(wù)。10年已為寧武眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。layui表單元素的校驗只需在元素上加入lay-verify,layui提供了以下值。
required(必填項) phone(手機(jī)號) email(郵箱) url(網(wǎng)址) number(數(shù)字) date(日期) identity(身份證) 自定義值
同時支持多條規(guī)則的驗證,格式:lay-verify=”驗證A|驗證B”
如:lay-verify=”required|phone|number”
另外,除了我們內(nèi)置的校驗規(guī)則,你還可以給他設(shè)定任意的值,比如lay-verify=”pass”,那么你就需要借助form.verify()方法對pass進(jìn)行一個校驗規(guī)則的定義
示例:
填入非法郵件時,點擊提交會有笑臉圖標(biāo)提示,挺棒的!
自定義校驗:
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ù)組的兩個值分別代表:[正則匹配、匹配不符時的提示文字] ,pass: [ /^[\S]{6,12}$/ ,'密碼必須6到12位,且不能出現(xiàn)空格' ] });
當(dāng)你自定義了類似上面的驗證規(guī)則后,你只需要把key賦值給輸入框的 lay-verify 屬性即可:
layui是什么
layui是一款采用自身模塊規(guī)范編寫的前端UI框架,它遵循原生HTML/CSS/JS的書寫與組織形式,門檻極低,適合新手,并且它還提供了豐富的內(nèi)置模塊,他們皆可通過模塊化的方式按需加載,從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過精心雕琢,非常適合界面的快速開發(fā),能夠作為PC網(wǎng)頁端后臺系統(tǒng)與前臺界面的速成開發(fā)方案。
上述就是小編為大家分享的使用layui怎么實現(xiàn)表單標(biāo)簽校驗了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。