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>