`

jquery.validate 扩展验证+异步验证

阅读更多
validate_expand.js
// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
    var length = value.length;
    var mobile =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号码格式错误");   


// 电话号码验证   
jQuery.validator.addMethod("phone", function(value, element) {
    var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
    return this.optional(element) || (tel.test(value));
}, "电话号码格式错误");


// 邮政编码验证   
jQuery.validator.addMethod("zipCode", function(value, element) {
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "邮政编码格式错误");


// QQ号码验证   
jQuery.validator.addMethod("qq", function(value, element) {
    var tel = /^[1-9]\d{4,9}$/;
    return this.optional(element) || (tel.test(value));
}, "qq号码格式错误");


// IP地址验证
jQuery.validator.addMethod("ip", function(value, element) {
    var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式错误");


// 字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
    var chrnum = /^([a-zA-Z0-9]+)$/;
    return this.optional(element) || (chrnum.test(value));
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");


// 中文的验证
jQuery.validator.addMethod("chinese", function(value, element) {
    var chinese = /^[\u4e00-\u9fa5]+$/;
    return this.optional(element) || (chinese.test(value));
}, "只能输入中文");


// 下拉框验证
$.validator.addMethod("selectNone", function(value, element) {
    return 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]);
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));




// 字符验证   
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("isIdCardNo", function(value, element) {   
  return this.optional(element) || isIdCardNo(value);   
}, "请正确输入您的身份证号码");   
    
// 手机号码验证   
jQuery.validator.addMethod("isMobile", function(value, element) {   
  var length = value.length;   
  var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;   
  return this.optional(element) || (length == 11 && mobile.test(value));   
}, "请正确填写您的手机号码");   
    
// 电话号码验证   
jQuery.validator.addMethod("isTel", function(value, element) {   
  var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678   
  return this.optional(element) || (tel.test(value));   
}, "请正确填写您的电话号码");   
   
// 联系电话(手机/电话皆可)验证   
jQuery.validator.addMethod("isPhone", 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));   
   
}, "请正确填写您的联系电话");   
    
// 邮政编码验证   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
  var tel = /^[0-9]{6}$/;   
  return this.optional(element) || (tel.test(value));   
}, "请正确填写您的邮政编码");   

 

initValidatorjs (异步验证用户名,手机号码,验证码,扩展验证)

/**
 * @author Administrator
 */
function initValidator(base){
    //异步验证用户名
    jQuery.validator.addMethod("checkUserName", function(value, element){
        var result = false;
        // 设置同步
        $.ajaxSetup({
            async: false
        });
        var param = {
            userName: value
        };
        $.post(base + "/checkUserName.do", param, function(data){
            result = (1 == data);
        });
        // 恢复异步
        $.ajaxSetup({
            async: true
        });
        return result;
    }, "用户名已经存在");
    
    //异步验证手机号码
    jQuery.validator.addMethod("checkSms", function(value, element){
        var result = false;
        // 设置同步
        $.ajaxSetup({
            async: false
        });
        var param = {
            sms: value
        };
        $.post(base + "/checkSms.do", param, function(data){
            result = (0 == data);
            
        });
        // 恢复异步
        $.ajaxSetup({
            async: true
        });
        return result;
    }, "手机号码已经存在");
    
    //异步验证验证码
    jQuery.validator.addMethod("checkCode", function(value, element){
        var result = false;
        // 设置同步
        $.ajaxSetup({
            async: false
        });
        var param = {
            userCode: value
        };
        $.post(base + "/checkCode.do", param, function(data){
            result = (1 == data);
            
        });
        // 恢复异步
        $.ajaxSetup({
            async: true
        });
        return result;
    }, "验证码不正确");
    
    
    $("#thisFrom").validate({
        //设置验证规则   
        rules: {
            "userName": {
                required: true,
                userNameCheck: true,
                checkUserName: true
            },
            "passWord": {
                required: true,
                rangelength: [6, 12]
            },
            "passWordAgain": {
                required: true,
                rangelength: [6, 12],
                equalTo: "#passWord"
            },
            "corpName": {
                required: true
            },
            "products": {
                required: true
            },
            "name": {
                required: true
            },
            "sms": {
                required: true,
                isMobile: true,
                checkSms: true
            },
            "userCode": {
                required: true,
                checkCode:true
            }
        },
        //设置错误信息  
        messages: {
            "userName": {
                required: "请输入用户名",
                userNameCheck: "请输入4-20位字母开头的字母或数字和下划线",
                checkUserName: "用户名已经存在"
            },
            "passWord": {
                required: "请输入密码",
                rangelength: "密码长度为6-12位"
            },
            "passWordAgain": {
                required: "请再次输入密码",
                rangelength: "密码长度为6-12位",
                equalTo: "两次输入密码不相同"
            },
            "corpName": {
                required: "请输入公司名称"
            },
            "name": {
                required: "请输入联系人"
            },
            "products": {
                required: "请输入主营产品"
            },
            "sms": {
                required: "请输入手机号码",
                isMobile: "请输入有效的手机号码",
                checkSms: "手机号码已经存在"
            },
            "userCode": {
                required: "请输入验证码",
                checkCode:"验证码不正确"
            }
        },
        errorPlacement: function(error, element){
            error.appendTo(element.parent("td").next("td"));
        }
    });
}

<script type="text/javascript"></script>
分享到:
评论

相关推荐

    jQuery.validate.js+API中文

    4. 阻止默认行为:通过设置submitHandler回调,可以阻止表单的默认提交行为,实现异步验证或自定义提交逻辑。 四、API详解 1. .validate(options):主方法,用于初始化验证插件,options是包含各种配置项的对象。 ...

    jQuery.validate验证

    7. **异步验证**: `remote`规则可以用来进行服务器端验证,通过AJAX请求向服务器发送数据,返回'true'或'false'以判断输入是否有效。 8. **事件和回调函数**: 该库提供了如`invalidHandler`、`submitHandler`等...

    jQuery验证控件jquery.validate.js使用说明+中文API

    - **异步验证**:支持使用`remote`规则进行服务器端验证。 - **分组验证**:`groups`选项可以将多个字段作为一个组进行验证。 - **禁用验证**:使用`.valid()`方法进行手动验证,或者通过`.valid()`的参数控制验证...

    jQuery.validate.js

    3. **自定义验证**:除了预设的验证规则,开发者还可以根据需求编写自己的验证方法,扩展验证功能。 4. **实时验证**:插件支持实时验证,用户在输入时即可看到错误反馈,无需等待提交表单后才知道问题所在。 5. *...

    jQuery.validate 用法

    除了基本的验证功能,jQuery.validate还提供了许多高级特性,如远程验证(`remote`)和异步验证。例如,可以使用`remote`规则来检查用户名是否已被注册: ```javascript username: { required: true, remote: ...

    jquery.validate+jquery.form.rar

    本资源“jquery.validate+jquery.form.rar”是结合了两个重要的jQuery插件:jQuery Validate和jQuery Form,用于增强HTML表单的验证和异步提交功能。 jQuery Validate插件是用于客户端验证的工具,它允许开发者轻松...

    Jquery.validate表单验证小结

    ### Jquery.validate表单验证详解 #### 一、引言 在Web开发中,表单验证是确保数据质量的关键步骤。...通过实践,可以进一步探索更多高级功能,如异步验证、动态规则调整等,从而满足更复杂的业务需求。

    jquery.validate.js表单验证[借鉴].pdf

    要在项目中使用 `jQuery.validate.js`,首先需要引入 jQuery 库,然后引入 validate 插件,如下所示: ```html &lt;script src="../js/jquery.js" type="text/javascript"&gt; &lt;script src="../js/jquery.validate.js" ...

    jquery.validate.js jquery表单验证

    2. **jQuery Validate 插件**:`jquery.validate.js` 文件是这个插件的核心,它扩展了 jQuery 的功能,允许开发者添加自定义验证规则和错误消息,为表单字段创建验证逻辑。该插件默认包含了一些常见的验证方法,如...

    jQuery.validate插件(附代码实例)

    jQuery.validate插件还提供了许多其他高级特性,如自定义验证方法、异步验证、分组验证等。例如,你可以创建一个自定义验证方法来检查用户名是否已被占用: ```javascript $.validator.addMethod("uniqueUsername",...

    jquery.validate.js表单验证.pdf

    这个库提供了丰富的功能,能够轻松地实现各种验证规则,包括基本的非空检查、长度限制、邮箱格式验证,甚至复杂的自定义规则和Ajax异步验证。 在使用jQuery Validate时,首先需要在HTML文档中引入jQuery库和jQuery ...

    jquery.validate.1.8.1.rar

    《jQuery Validate 1.8.1:前端表单验证的利器》 在Web开发中,表单验证是一项不可或缺的功能,它能确保用户输入的数据符合预设的规则,从而提高用户体验并减少服务器端的压力。jQuery Validate插件是JavaScript库...

    jquery.validate.js 用法

    此外,它还支持异步验证,即通过Ajax进行后台数据验证,避免了表单重复提交的问题。 #### 二、示例代码解析 在给定的部分内容中,我们看到了一段具体的使用`jquery.validate.js`的代码实例。下面我们将对这段代码...

    jquery.validate.js

    四、扩展验证规则 validate.js允许我们根据业务需求创建自定义验证规则。通过`.addMethod()`方法,我们可以添加新的验证函数。 ```javascript $.validator.addMethod("customRule", function(value, element) { /...

    jquery.validate验证快速上手

    ### jQuery Validate 快速入门与实战应用 #### 一、jQuery Validate 插件简介 `jQuery Validate` 是一个非常流行的前端表单验证插件,它基于 jQuery 开发,提供了丰富的验证规则和高度定制化的错误消息处理机制。...

    jQueryValidate.rar

    总结来说,jQuery Validate是实现前端表单验证的高效解决方案,它具有丰富的验证规则、灵活的配置选项和强大的扩展能力。通过对它的深入理解和熟练运用,开发者可以创建出既美观又实用的表单,提升网站或应用的整体...

    jquery validate 最稳定版本

    这些事件可以用来执行额外的操作,如显示/隐藏错误消息或处理异步验证。 6. **分组验证** 可以通过`groups`选项将多个字段组合成一组进行验证,确保所有字段都通过验证后才提交表单。 7. **远程验证** 对于需要...

    jquery.validate.min.zip

    3. **自定义验证方法**:通过`.addMethod()`,可以添加新的验证方法,扩展验证功能。 五、优化与注意事项 1. **错误消息定位**:使用`errorElement`和`errorClass`选项可以自定义错误消息的展示方式,例如改变错误...

Global site tag (gtag.js) - Google Analytics