您好,登錄后才能下訂單哦!
這篇文章給大家分享的是layui的表單驗(yàn)證,相信大部分人都還沒學(xué)會(huì)這個(gè)技能,為了讓大家學(xué)會(huì),給大家總結(jié)了以下內(nèi)容,話不多說(shuō),一起往下看吧。
1、排序 驗(yàn)證
html代碼
<div class="layui-form-item"> <label class="layui-form-label">排序</label> <div class="layui-input-block"> <input type="number" name="sort" autocomplete="off" min="0" max="99999" lay-verify="sort" class="layui-input"> </div> </div>
type="number" 之后文本框的后面就出現(xiàn)如上圖那樣的效果,并且只能輸入數(shù)字和小數(shù)點(diǎn)
js代碼
layui.use([ "form", "layer" ], function() { var form = layui.form; var layer = layui.layer; //表單驗(yàn)證 form.render();//這句一定要加,占坑 form.verify({ sort:[/^$|^[0-9]{0,5}$/, '只能是數(shù)字且范圍0~99999!']//這個(gè)就是上面的排序lay-verify="sort" ,remark: function (value){ if(value.length > 200){ return '長(zhǎng)度大于200!請(qǐng)重新輸入'; } } }); });
2.金額 驗(yàn)證
效果和排序一樣
<div class="layui-form-item"> <label class="layui-form-label">余額(元)</label> <div class="layui-input-block"> <input type="number" name="balance" id="balance" lay-verify="money" autocomplete="off" placeholder="單位:元" class="layui-input" > </div> </div>
layui.use([ "form", "layer", "laydate" ], function() { laydate = layui.laydate; form = layui.form; layer = layui.layer;// 表單驗(yàn)證 form.render(); form.verify({ lenth60 : function(value) { if (value.length > 50) { return '長(zhǎng)度大于50!請(qǐng)重新輸入'; } }, lenth500 : function(value) { if (value.length > 400) { return '長(zhǎng)度大于400!請(qǐng)重新輸入'; } }, money : function(value) { if (value.length > 0) { var reg = /(^[0-9]([0-9]+)?(\.[0-9]+)$)|(^(0){1}$)|(^([0-9]+)?$)/; if (!reg.test(value)) { return '輸入格式有誤'; } } if (value.length > 50) { return '長(zhǎng)度大于50!請(qǐng)重新輸入'; } } }); //下面這段代碼主要是用于強(qiáng)制清除當(dāng)用戶輸入0開頭的數(shù)字,比如0000,02323,匹配到的話就為0 //如果要在layui里面 寫js事件之類的代碼就一定要放在use組件模塊里面,這是其中一個(gè)坑! $('#balance').bind('input propertychange', function() { var balance = $("#balance").val(); var zero = /^(0){2,}$|^(0)([0-9])?$/; if (zero.test(balance)) { $('#balance').val(0); } }); });
看完上述內(nèi)容,你們對(duì)layui的表單驗(yàn)證有進(jìn)一步的了解嗎?如果還想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀。
免責(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)容。