这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战javascript

jQuery验证及限制java

jQuery验证及限制

绑定键盘监听事件

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

复制代码

输入框设置

而后咱们只须要在input中添加txt-valid-len这个class属性。而且加入maxlength属性指定长度就能够了。jquery

<input type="text" id="user_name" name="name" class="form-control txt-valid-len" maxlength="11" />
复制代码

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

jquery表单提交验证

在开发中咱们前台常常须要在与后台交互前进行相关数据的验证。这样能够减小服务端的压力。下面咱们来看看jquery给咱们提供的表单验证的方法。

引入脚本文件

jquery.min.js
jquery.validate.js
复制代码

这两个js在官网的jQuery中都是包含的，直接下载引入就好了。ajax
有了这两个js咱们还须要页面上的form表单。表单就是咱们日常的表单。json

<form id="myform" method="post" action="#">
      <p>
          <label for="myname">用户名：</label>
          <!-- id和name最好同时写上 -->
          <input  id="myname" name="myname" />
      </p>
      <p>
          <label for="age">年龄：</label>
          <input id="age" name="age" />
      </p>
      <p>
          <label for="email">E-Mail：</label>
          <input id="email" name="email" />
      </p>
      <p>
          <label for="password">登录密码：</label>
          <input id="password" name="password" type="password" />
      </p>
      <p>
          <label for="confirm_password">确认密码：</label>
          <input  name="confirm_password" type="password" />
      </p>
      <p>
          <input class="submit" type="submit" value="当即注册" />
      </p>
</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;
}
复制代码

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

参考网址markdown

验证提示信息的显示位置

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

var validator = $("#myform").validate({  
        debug: true,       //调试模式取消submit的默认提交功能  
        errorClass: "haha",//默认为错误的样式类为：error  
        focusInvalid: false,  
        onkeyup: false,  
        submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form  
            alert("提交表单");  
            //form.submit();   提交表单  
        },  
        rules: {           //定义验证规则,其中属性名为表单的name属性  
            username: {  
                required: true,  
                minlength: 2,  
                remote: "uservalid.jsp"  //传说当中的ajax验证  
            },  
            firstpwd: {  
                required: true,  
                //minlength: 6  
                rangelength: [6,8]  
            },  
            secondpwd: {  
                required: true,  
                equalTo: "#password"  
            },  
            sex: {  
                required: true  
            },  
            age: {  
                required: true,  
                range: [0,120]  
            },  
            email: {  
                required: true,  
                email: true  
            },  
            purl: {  
                required: true,  
                url: true  
            },  
            afile: {  
                required: true,  
                accept: "xls,doc,rar,zip"  
            }  
        },  
        messages: {       //自定义验证消息  
            username: {  
                required: "用户名是必需的！",  
                minlength: $.format("用户名至少要{0}个字符！"),  
                remote: $.format("{0}已经被占用")  
            },  
            firstpwd: {  
                required: "密码是必需的！",  
                rangelength: $.format("密码要在{0}-{1}个字符之间！")  
            },  
            secondpwd: {  
                required: "密码验证是必需的！",    
                equalTo: "密码验证须要与密码一致"  
            },  
            sex: {  
                required: "性别是必需的"  
            },  
            age: {  
                required: "年龄是必需的",  
                range: "年龄必须介于{0}-{1}之间"  
            },  
            email: {  
                required: "邮箱是必需的！",  
                email: "请输入正确的邮箱地址（例如 myemail@163.com）"  
            },  
            purl: {  
                required: "我的主页是必需的",  
                url: "请输入正确的url格式,如 http://www.domainname.com"  
            },  
            afile: {  
                required: "附件是必需的！",  
                accept: "只接收xls,doc,rar,zip文件"  
            }  
        },  
        errorPlacement: function(error, element) {  //验证消息放置的地方  
            error.appendTo( element.parent("td").next("td") );  
        },  
        highlight: function(element, errorClass) {  //针对验证的表单设置高亮  
            $(element).addClass(errorClass);  
        },  
        success: function(label) {    
                    label.addClass("valid").text("Ok!")    
            }    
          
        /*, 
        errorContainer: "#error_con",               //验证消息集中放置的容器 
        errorLabelContainer: "#error_con ul",       //存放消息无序列表的容器 
        wrapper: "li",                              //将验证消息用无序列表包围 
        validClass: "valid",                        //经过验证的样式类 
        errorElement: "em",                         //验证标签的名称，默认为：label 
        success: "valid"                            //验证经过的样式类 
        */  
    });
复制代码

重构规则

不论何时，当你的表单中的多个字段含有相同的验证规则及验证消息，重构规则能够减小不少重复。使用 addMethod 和 addClassRules 将很是有效果。
假使已经重构了以下规则：app

// 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] )
返回：undefineddom

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

参数 method 类型：Callback 方法的实现部分，返回true若是表单元素经过验证。jsp

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

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

addClassRules( name, rules ) 返回：undefined

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

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

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

jquery验证大全