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 表示不干预
    };
  };

自定义验证

由于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;
    }
}

表单元素使用验证

    

        

            

                用户名
                

                    
                
            
            

                手机号
                

                    
                
            
            

                邮箱
                

                    
                
            
            

                密码
                

                    
                
            
            

                确认密码
                

                    
                
            
        
    
    

        

            
                
                提交
            
            
                
                重置