1. 程式人生 > >layui在form表單頁面通過Validform加入簡單驗證

layui在form表單頁面通過Validform加入簡單驗證

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();
            });
        });