jquery验证大全

小咪咪 2022-09-28 11:42 171阅读 0赞

# jQuery验证及限制 #

## 绑定键盘监听事件 ##

$(document).on("keypress", ".txt-valid-len", function (e) { 
            return (this.value.length < $(this).attr("maxlength"));
        });

## 输入框设置 ##

*  然后我们只需要在input中添加txt-valid-len这个class属性。并且加入maxlength属性指定长度就可以了。

*  上面的代码的意思就是这个输入框长度限制在11位，超过11位就不显示了。如果想在超过11位进行提示。可以扩展上面的监听事件。

--------------------

# jquery表单提交验证 #

*  在开发中我们前台经常需要在与后台交互前进行相关数据的验证。这样可以减少服务端的压力。下面我们来看看jquery给我们提供的表单验证的方法。

## 引入脚本文件 ##

jquery.min.js
    jquery.validate.js

*  这两个js在官网的jQuery中都是包含的，直接下载引入就行了。
 *  有了这两个js我们还需要页面上的form表单。表单就是我们平常的表单。

## 自定义js实现表单验证(利用jQuery提供内置方法) ##

*  首先我们通过jQuery提供的选择器找到我们需要验证的表单

$("#myform").validate();

*  就这样我们就完成了表单验证。当然啦，到这里只是架子打好了。下面我们开始在validate中填写我们的验证规则了。

$("#myform").validate({
            debug: true, //调试模式取消submit的默认提交功能 
            //errorClass: "label.error", //默认为错误的样式类为：error 
            focusInvalid: false, //当为false时，验证无效时，没有焦点响应 
            onkeyup: false,   
            submitHandler: function(form){    //表单提交句柄,为一回调函数，带一个参数：form 
                alert("提交表单");   
                form.submit();   //提交表单 
            },   
    
            rules:{
                myname:{
                    required:function(element){ 
                        if( $("#age").val() < 13){
                            return true;
                        }
                        else{
                            return false;
                        }
                    }
                },
                email:{
                    required:true,
                    email:true
                },
                password:{
                    required:true,
                    rangelength:[3,10]
                },
                confirm_password:{
                    equalTo:"input[name=password]"
                }                    
            },
            messages:{
                myname:{
                    required:"必填"
                },
                email:{
                    required:"<span style='color:red;'>只允许输入整数。</span>",
                    email:"E-Mail格式不正确"
                },
                password:{
                    required: "不能为空",
                    rangelength: $.validator.format("密码最小长度:{0}, 最大长度:{1}。")
                },
                confirm_password:{
                    equalTo:"两次密码输入不一致"
                }                                    
            }
    
        });

*  其中的rules就是我们验证规则内容。其中的myname,email…是我们form需要验证的控件的name属性值(并不是ID属性值)，还有我们的提示信息可以做的花哨一点加入样式

<span style='color:red;'>只允许输入整数。</span>

*  至于这些验证规则我们可以在jquery-validate.js中找到。里面messages属性的提示信息我们都是可以用来做验证的.

### 动态决定验证规则 ###

*  上面的myname的required的验证是根据id=age的input框的值得变化决定的，就是说你输入的年龄小于13岁myname是需要验证的。大于则反之。如果你想做的像更美化我们可以在年龄input中绑定一个失去焦点的时间(blur)，在输入完年龄我们就立马去验证myname的input框的规则，通过调用

$("#myname").valid();

*  就会去按照我们的规则去验证myname这个字段的input的值。

### 通过远程进行验证 ###

#### 前台 ####

*  对上面的进行如下的修改，其中remote就是我们的远程请求，该请求返回的true,则验证通过，false反之。

$("#myform").validate({  
      rules: {  
        email: {  
          required: true,
          email: true,
          remote: {
              type:"post",
              dataType: "json",
              contentType : "application/json",
              url:"/adminManage/email.bsh"
          }  
        }  
      }  
    });

#### 后台 ####

*  这的注意的是remote这里的请求格式有些要求，这个url返回的数据必须是json格式的。但是后台只能返回string或者boolean类型的数据。如果返回的是string内容的json，那么string是true则验证通过，若果不是true则验证提示就是你返回的string内容。如果是boolean，是true则验证通过，false验证失败。

@RequestMapping("/email.bsh")
        @ResponseBody
        public Object email(HttpServletRequest request,HttpServletResponse response) 
        {
    
            return "已经存在";
        }

*  前台提示已经存在，会覆盖前台默认的提示内容

@RequestMapping("/email.bsh")
    @ResponseBody
    public Object email(HttpServletRequest request,HttpServletResponse response) 
    {
    
        return "true";
    }

*  验证通过

@RequestMapping("/email.bsh")
    @ResponseBody
    public Object email(HttpServletRequest request,HttpServletResponse response) 
    {
    
        return true;
    }

*  验证通过

@RequestMapping("/email.bsh")
    @ResponseBody
    public Object email(HttpServletRequest request,HttpServletResponse response) 
    {
    
        return false;
    }

*  验证失败，前台将提示默认的信息

--------------------

[参考网址][Link 1]

## 验证提示信息的显示位置 ##

*  在上面一节我们详细介绍了验证的规则及提示实现。那么提示信息的位置有时候也是很重要的，我们控制的好的话界面会很美观的。

## 重构规则 ##

不论什么时候，当你的表单中的多个字段含有相同的验证规则及验证消息，重构规则可以减少很多重复。使用 addMethod 和 addClassRules 将非常有效果。  
假使已经重构了如下规则：

// alias required to cRequired with new message  
    $.validator.addMethod("cRequired", $.validator.methods.required,  
      "Customer name required"); 
    // alias minlength, too  
    $.validator.addMethod("cMinlength", $.validator.methods.minlength,   
      // leverage parameter replacement for minlength, {
       0} gets replaced with 2  
      $.format("Customer name must have at least {0} characters")); 
    // combine them both, including the parameter for minlength  
    $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 }); 
    
    <input name="customer1" class="customer" />  
    <input name="customer2" class="customer" />  
    <input name="customer3" class="customer" />

### adMethod ###

addMethod( name, method, \[message\] )  
返回：undefined

参数 name 类型：String  
要添加的方法名，用于标识和引用，必须是一个有效的javascript标识符。

参数 method 类型：Callback 方法的实现部分，返回true如果表单元素通过验证。

参数 message(Optional) 类型：String, Function 该方法的默认验证消息。可以用 jQuery.validator.format(value) 方法创建。如果未定义该参数，则使用本地已存在的验证消息，另外，必须为指定的表单元素定义验证消息。

说明：添加一个用户自定义的验证方法。它由方法名（必须是一个合法的javascript标识符）、基于javascript的函数及默认的验证消息组成。

addClassRules( name, rules )  
返回：undefined

参数 name 类型：String 要添加的样式规则名。

参数 rules 类型：Options 规则选项。

说明：添加一个复合的样式验证方法。对于将多个联合使用的规则重构进单个样式中非常有用。

[Link 1]: http://koalaxyq.iteye.com/blog/557521