seajs和JQuery的validate配合应用，validate扩展验证库

最新推荐文章于 2020-06-12 11:37:08 发布

梦无悔

最新推荐文章于 2020-06-12 11:37:08 发布

阅读量686

点赞数

分类专栏： sea-js 插件框架 jquery-validate-js 文章标签： jquery 扩展 seajs validation validate

本文链接：https://blog.csdn.net/u014444571/article/details/71425203

版权

插件框架同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

sea-js

2 篇文章 0 订阅

订阅专栏

jquery-validate-js

1 篇文章 0 订阅

订阅专栏

一：目录结构

目录结构

文件说明：

jquery.js —-JQuery文件
test.js——–验证测试文件
jquery.validate.js—-validate验证文件
jquery.validate.ex.js—–validate验证拓展库
sea.js ———-seajs文件和配置
index.html ——>测试html文件

js详细内容

1、seajs 省略js，只包含配置文件

var publishVersion = '@version@';
var version = '20160115';

if(publishVersion.indexOf('@') < 0){
    version = publishVersion;
}

seajs.config({
    base: "./js/",
    alias: {
        "jquery": "jquery/jquery.js",
        "angularjs": "angularjs/lib/angular.min.js",
        "ngConfig": "angularjs/config/config.js",
        "ngmessage": "angularjs/lib/angular-messages.js",
        "validateDirectives": "angularjs/directives/validateDirectives.js",
        "directives": "angularjs/directives/directives.js",
        "superslide": "SuperSlide/jquery.SuperSlide.2.1.js",
        "validate": "validate/jquery.validate.js",
        "validation": "validate/jquery.validate.ex.js",
        "aos": "aos/aos.js",
        "aosui": "aos/aos.css",
        "myValidate": "validate/myValidate.js"//自定义验证

    },
    map: [
            [ /^(.*\.(?:css|js))(.*)$/i, '$1?v=' + version ]
        ]
});

2、jquery.validate.ex.js 验证拓展库

define(function(require, exports, module) {

jQuery.validator.addMethod("isZipCode", function(value, element) {    
  var zip = /^[0-9]{6}$/;    
  return this.optional(element) || (zip.test(value));    
}, "请正确填写您的邮政编码!");        

jQuery.validator.addMethod("numFormart", function(value, element, params) {
    alert(value)
    var re = /^(0|[1-9]\d*)(\.\d{1,2})?$/;
    var result = re.test(value);
    return result;

}, "金额不能以0开头");

// 手机号码验证    
jQuery.validator.addMethod("isMobile", function(value, element) {    
  var length = value.length;    
  return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/.test(value));    
}, "请正确填写您的手机号码!");

// 电话号码验证    
jQuery.validator.addMethod("isPhone", function(value, element) {    
  var tel = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/;  
  var mobile = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
  return this.optional(element) || (tel.test(value));    
}, "请正确填写您的电话号码!")

// 用户名字符验证    
jQuery.validator.addMethod("userName", function(value, element) {    
  return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);    
}, "用户名只能包括中文字、英文字母、数字和下划线!");   

// 联系电话(手机/电话皆可)验证   
jQuery.validator.addMethod("isTel", function(value,element) {   
    var length = value.length;   
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;   
    var tel = /^\d{3,4}-?\d{7,9}$/;   
    return this.optional(element) || (tel.test(value) || mobile.test(value));   
}, "请正确填写您的联系电话!");  

// IP地址验证   
jQuery.validator.addMethod("ip", function(value, element) {    
  return this.optional(element) || /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(value);    
}, "请填写正确的IP地址！");

//用于判断是否是给定数字的整数倍
jQuery.validator.addMethod("times", function(value, element,param) {    
  return this.optional(element) || Number(value)%Number(param) == 0;    
}, jQuery.validator.format("必须是{0}的整数倍！")); 

//用于判断账户余额
jQuery.validator.addMethod("accountMax",function(value,element,param){
    return Number(value) <= Number(param);
},jQuery.validator.format("账户余额不足！"));

//用于当前用户可投额度
jQuery.validator.addMethod("tenderMax",function(value,element,param){
    return Number(value) <= Number(param);
},jQuery.validator.format("不能大于当前可投额度！"));

//用于判断是否是给定数字的整数倍
jQuery.validator.addMethod("bigtimes", function(value, element,param) {    
  return this.optional(element) || Number(value) * 10000 % Number(param) == 0;    
}, jQuery.validator.format("必须是{0}的整数倍！")); 

//用于判断一个输入框的值小于另外一个输入框的
jQuery.validator.addMethod("smaller", function(value, element, param) {
    var target = $( param );
//  if ( this.settings.onfocusout ) {
//      target.unbind( ".validate-equalTo" ).bind( "blur.validate-equalTo", function() {
//          $( element ).valid();
//      });
//  }
    return this.optional(element) || Number(value) <= Number(target.val());
}, jQuery.validator.format("请正确填写"));

jQuery.validator.addMethod("isNoChinese", function(value, element) {
    var reg = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
    return this.optional(element) || (!reg.test(value) && /^[\u0391-\uFFE5\w]+$/.test(value)) ;
}, "用户名必须由字母、数字或“_”组成");

//用于判断昵称是字母、数字、特殊字符或“_”组成
jQuery.validator.addMethod("isNickName", function(value, element) {
    var reg = /^[\w][\w@.]+$/;
    return this.optional(element) || reg.test(value);
}, "用户名必须由字母、数字或特殊符号(@_.)组成");

//用于判断是否含有空格
jQuery.validator.addMethod("isNoSpace", function(value, element) {
    var reg = /^[^ ]+$/;
    return this.optional(element) || reg.test(value);
}, "密码中不能含有任何空格");

jQuery.validator.addMethod("isValidBizUserId", function(value, element) {
    var reg = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi;
    return this.optional(element) || (!reg.test(value) && /^[\u0391-\uFFE5\w]+$/.test(value)) ;
}, "引荐人工号格式不正确");

//密码复杂度校验
jQuery.validator.addMethod("complexity", function(value, element) {  
    var reg = /^(?=.*\d)(?=.*[a-zA-Z])[\S]+$/;
    return this.optional(element) || reg.test(value);    
}, jQuery.validator.format("密码过于简单，至少要字母和数字的组合"));

//登录密码复杂度校验
jQuery.validator.addMethod("loginPwdComplexity", function(value, element) {  
    var reg = /^(?=.*\d)(?=.*[a-zA-Z])[\S]+$/;
    return this.optional(element) || reg.test(value);    
}, jQuery.validator.format("登录密码为8~16位数字和字母的组合")); 

//金额校验
jQuery.validator.addMethod("money", function(value, element) {  
    var reg = /^[0-9]+(.[0-9]{1,2})?$/;
  return this.optional(element) || reg.test(value);    
}, jQuery.validator.format("格式有误，只允许输入两位小数")); 

jQuery.validator.addMethod("yearRate", function(value, element) {  
    var reg = /^[0-9]+(.[0-9]{1})?$/;
  return this.optional(element) || reg.test(value);    
}, jQuery.validator.format("格式有误，只允许输入1位小数")); 

//年龄 表单验证规则
jQuery.validator.addMethod("age", function(value, element) {   
    var age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
    return this.optional(element) || (age.test(value));
}, "不能超过120岁"); 
/ 20-60   /^([2-5]\d)|60$/

//传真
jQuery.validator.addMethod("fax",function(value,element){
    var fax = /^(\d{3,4})?[-]?\d{7,8}$/;
    return this.optional(element) || (fax.test(value));
},"传真格式如：0371-68787027");

//验证当前值和目标val的值相等 相等返回为 false
jQuery.validator.addMethod("equalTo2",function(value, element){
    var returnVal = true;
    var id = $(element).attr("data-rule-equalto2");
    var targetVal = $(id).val();
    if(value === targetVal){
        returnVal = false;
    }
    return returnVal;
},"不能和原始密码相同");

//大于指定数
jQuery.validator.addMethod("gt",function(value, element){
    var returnVal = false;
    var gt = $(element).data("gt");
    if(value > gt && value != ""){
        returnVal = true;
    }
    return returnVal;
},"不能小于0 或空");

//汉字
jQuery.validator.addMethod("chinese", function (value, element) {
    var chinese = /^[\u4E00-\u9FFF]+$/;
    return this.optional(element) || (chinese.test(value));
}, "格式不对");

//指定数字的整数倍
jQuery.validator.addMethod("times", function (value, element) {
    var returnVal = true;
    var base=$(element).attr('data-rule-times');
    if(value%base!=0){
        returnVal=false;
    }
    return returnVal;
}, "必须是发布赏金的整数倍");

// 字符验证       
jQuery.validator.addMethod("stringCheck", function(value, element) {       
    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);       
 }, "只能包括中文字、英文字母、数字和下划线");   
 // 中文字两个字节       
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {       
   var length = value.length;       
   for(var i = 0; i <value.length; i++){       
        if(value.charCodeAt(i) > 127){       
         length++;       
         }       
   }       
    return this.optional(element) || ( length >= param[0] && length <= param[1] );       
 }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");   


jQuery.validator.addMethod("transferPrice", function(value, element,param) { 
    var account = (parseFloat(param) * 0.75).toString();
    var resultAccount;
    if(account.indexOf('.') >= 0){
        resultAccount = account.substring(0, account.indexOf('.') + 3)
    }

    if(parseFloat(value) < parseFloat(resultAccount)){
        return false;
    }else{
        return true;
    }
}, jQuery.validator.format("转让价不能小于剩余本金的75%")); 

jQuery.validator.addMethod("transferMaxPrice", function(value, element,param) {  
    if(parseFloat(value) > parseFloat(param)){
        return false;
    }else{
        return true;
    }
}, jQuery.validator.format("转让价不能大于剩余本金")); 

jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
    var target = $( param );
    alert(target.val())
    return this.optional(element) || Number(value) != Number(target.val());
});

//身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) { 
  return this.optional(element) || isIdCardNo(value);
}, "身份证号错误(不区分大小写)"); 

//增加身份证验证
function isIdCardNo(num) {
    var factorArr = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1);
    var parityBit = new Array("1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2");
    var parityBit1 = new Array("1", "0", "x", "9", "8", "7", "6", "5", "4", "3", "2");
    var varArray = new Array();
    var intValue;
    var lngProduct = 0;
    var intCheckDigit;
    var intStrLen = num.length;
    var idNumber = num;
    // initialize
    if ((intStrLen != 15) && (intStrLen != 18)) {
        return false;
    }
    // check and set value
    for (i = 0; i < intStrLen; i++) {
        varArray[i] = idNumber.charAt(i);
        if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) {
            return false;
        } else if (i < 17) {
            varArray[i] = varArray[i] * factorArr[i];
        }
    }
    if (intStrLen == 18) {
        //check date
        var date8 = idNumber.substring(6, 14);
        if (isDate8(date8) == false) {
            return false;
        }
        // calculate the sum of the products
        for (i = 0; i < 17; i++) {
            lngProduct = lngProduct + varArray[i];
        }
        // calculate the check digit
        intCheckDigit = parityBit[lngProduct % 11];
        intCheckDigit1 = parityBit1[lngProduct % 11];
        // check last digit
        if (varArray[17] != intCheckDigit && varArray[17] != intCheckDigit1) {
            return false;
        }
    }
    else {        //length is 15
        //check date
        var date6 = idNumber.substring(6, 12);
        if (isDate6(date6) == false) {
            return false;
        }
    }
    return true;
}
function isDate6(sDate) {
    if (!/^[0-9]{6}$/.test(sDate)) {
        return false;
    }
    var year, month, day;
    year = sDate.substring(0, 4);
    month = sDate.substring(4, 6);
    if (year < 1700 || year > 2500) return false
    if (month < 1 || month > 12) return false
    return true
}
/**
* 判断是否为“YYYYMMDD”式的时期
*
*/
function isDate8(sDate) {
    if (!/^[0-9]{8}$/.test(sDate)) {
        return false;
    }
    var year, month, day;
    year = sDate.substring(0, 4);
    month = sDate.substring(4, 6);
    day = sDate.substring(6, 8);
    var iaMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    if (year < 1700 || year > 2500) return false
    if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1] = 29;
    if (month < 1 || month > 12) return false
    if (day < 1 || day > iaMonthDays[month - 1]) return false
    return true
}

})

3、test.js测试调用文件


define(function(require){
    require('jquery');
    require('validate');
    // 验证拓展库
    require('validation');
    //错误提示监视器
    $(".erroy_tips").bind('DOMNodeInserted', function(e) {
        if(($(e.target).html()).length>1){
            showTips();
        }
    });

    $().ready(function(){
         $("#validateForm").validate({
            debug:true, //调试模式，即使验证成功也不会跳转到目标页面
            focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
            onkeyup: false,
            errorPlacement: function(error, element) {
                    $("#erroy_tips").html(error);
            },//验证不通过调用函数
            rules:{
                name: "required",
                number: {
                    required: true,
                    number: true,
                    max: 100000000,
                    min: -100
                },
                code: {
                    required: true,
                    rangelength: [15,19],
                    isIdCardNo: true 
                },
                mobile: {
                    required: true,
                    isMobile: true
                },
                money: {
                    required: true,
                    numFormart: 0
                },
                date: {
                    required: true,
//                  date:true
                }
            },
            messages: {
                name: "name不能为空！",
                number: {
                    required: "number不能为空",
                    number: "请输入有效的数字",
                    max: "最大值不能超过{0}",
                    min: "最小值不能超过{0}"
                },
                code: {
                    required: "code不能为空",
                    rangelength: "身份证长度为{0}到{1}",
                    isIdCardNo: "身份证格式不正确！"
                },
                mobile: {
                    required: "mobile不能为空",
                    isMobile: "请输入正确的手机号码！"
                },
                money: {
                    required: "money不能为空",
                    numFormart: "金额不能以0开头！"
                },
                date: {
                    required: "date不能为空",
                    date: "时间格式正确！"
                }
            },
            submitHandler:function(form){
                alert("submit!");   
//              form.submit();
             } 
         })
    })
})


//默认验证规则
//序号    规则  描述
//1     required:true       必须输入的字段。
//2     remote:"check.php"  使用 ajax 方法调用 check.php 验证输入值。
//3     email:true          必须输入正确格式的电子邮件。
//4     url:true            必须输入正确格式的网址。
//5     date:true           必须输入正确格式的日期。日期校验 ie6 出错，慎用。
//6     dateISO:true        必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
//7     number:true         必须输入合法的数字（负数，小数）。
//8     digits:true         必须输入整数。
//9     creditcard:         必须输入合法的信用卡号。
//10    equalTo:"#field"    输入值必须和 #field 相同。
//11    accept:             输入拥有合法后缀名的字符串（上传文件的后缀）。
//12    maxlength:5         输入长度最多是 5 的字符串（汉字算一个字符）。
//13    minlength:10        输入长度最小是 10 的字符串（汉字算一个字符）。
//14    rangelength:[5,10]  输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
//15    range:[5,10]        输入值必须介于 5 和 10 之间。
//16    max:5               输入值不能大于 5。
//17    min:10              输入值不能小于 10。

4、test.html 测试html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/sea.js"></script>
        <title></title>
    </head>
    <body>
        <form action="www.baidu.com" id="validateForm" name="validateForm">

            name:   <input id="name"  name="name"/><br/>
            number: <input id="number" name="number"/><br/>
            code:   <input id="code" name="code"/><br/>
            mobile: <input id="mobile" name="mobile"/><br/>
            money:  <input id="money" name="money"/><br/>
            date:   <input id="date" name="date"/><br/>
            submit: <input type="submit" value="提交" />
        </form>
        <div id="erroy_tips" style="color: red;">

        </div>
    </body>
    <script type="text/javascript">
        seajs.use(["myJs/test"])
    </script>
</html>

梦无悔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
seajs和JQuery的validate配合应用，validate扩展验证库

一：目录结构文件说明：jquery.js —-JQuery文件test.js——–验证测试文件 jquery.validate.js—-validate验证文件 jquery.validate.ex.js—–validate验证拓展库 sea.js ———-seajs文件和配置 index.html ——>测试html文件js详细内容1、seajs 省略js，只包含配置文
复制链接

扫一扫