layui在form表單頁面通過Validform加入簡單驗證
阿新 • • 發佈:2019-01-10
form簡單驗證
<input type="text" name="email" datatype="e" ignore="ignore" placeholder="請輸入郵箱" autocomplete="off" class="layui-input"> datatype="e"驗證郵箱 ignore="ignore"忽略,如果填寫就驗證沒有填入郵箱就不驗證 詳情參考Validform_v5.3.2.js 貼出一部分: var tipmsg={//預設提示文字; tit:"提示資訊", w:{ "*":"不能為空!", "*6-16":"請填寫6到16位任意字元!", "n":"請填寫數字!", "n6-16":"請填寫6到16位數字!", "s":"不能輸入特殊字元!", "s6-18":"請填寫6到18位字元!", "p":"請填寫郵政編碼!", "m":"請填寫手機號碼!", "e":"郵箱地址格式不對!", "url":"請填寫網址!" }, def:"請填寫正確資訊!", undef:"datatype未定義!", reck:"兩次輸入的內容不一致!", r:"通過資訊驗證!", c:"正在檢測資訊…", s:"請{填寫|選擇}{0|資訊}!", v:"所填資訊沒有經過驗證,請稍後…", p:"正在提交資料…" }
Validform.util={ dataType:{ "*":/[\w\W]+/, "*6-16":/^[\w\W]{6,16}$/, "n":/^\d+$/, "n6-16":/^\d{6,16}$/, "s":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/, "s6-18":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{6,18}$/, "p":/^[0-9]{6}$/, "m":/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/, "e":/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, "url":/^(\w+:\/\/)?\w+(\.\w+)+.*$/ },
>
簡單的點選圖示左右開關
<input type="checkbox" name="loginflag" checked lay-skin="switch" lay-filter="switchTest" lay-text="允許|禁止">
>
驗證的設定
<input type="text" name="password" datatype="s6-18" placeholder="請輸入密碼" autocomplete="off" class="layui-input">
s6-18可以根據自己的長度進行自定義設定,s代表string字串
>
修改layui監聽事件 先驗證表單
$("#signupForm").Validform({ //根據id觸發 btnSubmit:"#formSubmit", //繫結id根據id觸發驗證 tiptype:3, //第三種方式 showAllError:true, //顯示所有的錯誤 beforeSubmit:function(curform){ //驗證過後執行save方法 save(); }, });
原layui監聽
layui.use(['form'], function(){ var form = layui.form; //監聽提交 form.on('submit(submitForm)', function(data){ save(); }); });