layui表單驗證

layui框架源碼自帶驗證

Form = function(){
    this.config = {
      verify: {
        required: [
          /[\S]+/
          ,'必填項不能為空'
        ]
        ,phone: [
          /^1\d{10}$/
          ,'請輸入正確的手機號'
        ]
        ,email: [
          /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
          ,'郵箱格式不正確'
        ]
        ,url: [
          /^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/
          ,'鏈接格式不正確'
        ]
        ,number: function(value){
          if(!value || isNaN(value)) return '只能填寫數字'
        }
        ,date: [
          /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/
          ,'日期格式不正確'
        ]
        ,identity: [
          /(^\d{15}$)|(^\d{17}(x|X|\d)$)/
          ,'請輸入正確的身份證號'
        ]
      }
      ,autocomplete: null //全局 autocomplete 狀態。null 表示不干預
    };
  };

自定義驗證

<script>
layui.use(['form'],function(){
    let form = layui.form;

    form.verify({
        confirmPass:function(value){
            if($('input[name=PassWord]').val() !== value)
                return '兩次密碼輸入不一致！';
        },
        nullableEmail:function(value){
            if(!nullableEmailCheck(value))
                return '請輸入正確的郵箱！';
        },
        nullablePhone:function(value){
            if(!nullablePhoneCheck(value))
                return '請輸入正確的手機號！';
        }
    });
})
</script>

由於mvc中razor語法@為標識符，不能在view中編寫使用@字符的正則表達式，所引驗證方法需要單獨寫到js文件提供view引用。

//最新的layui框架手機郵箱驗證已經修復了，手機郵箱不可空的問題。。。
//百度上有說直接修改引用的layui.js文件的驗證規則就可以，不用那么麻煩自己再添加js。我改了但是不起作用。。。。

//可空的email
function nullableEmailCheck(emailStr) {
    var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    if (emailStr != "" && !pattern.test(emailStr)) {
        return false;
    } else {
        return true;
    }
}

//可空的phone
function nullablePhoneCheck(phoneStr) {
    var pattern = /^1\d{10}$/;
    if (phoneStr != "" && !pattern.test(phoneStr)) {
        return false;
    } else {
        return true;
    }
}

表單元素使用驗證

<form class="layui-form">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 20%">用戶名</label>
                <div class="layui-input-block">
                    <input type="text" name="Name" lay-verify="required" autocomplete="off" placeholder="請輸入用戶名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 20%">手機號</label>
                <div class="layui-input-block">
                    <input type="text" name="Phone" lay-verify="nullablePhone" autocomplete="off" placeholder="請輸入手機號" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 20%">郵箱</label>
                <div class="layui-input-block">
                    <input type="text" name="Email" lay-verify="nullableEmail" autocomplete="off" placeholder="請輸入郵箱" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 20%">密碼</label>
                <div class="layui-input-block">
                    <input type="password" name="PassWord" lay-verify="required" autocomplete="off" placeholder="請輸入密碼" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 20%">確認密碼</label>
                <div class="layui-input-block">
                    <input type="password" name="ConfirmPassWord" lay-verify="required|confirmPass" autocomplete="off" placeholder="請輸入確認密碼" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>