JSP页面中的Form表单自动校验（使用validate插件）

一、问题描述

    在jsp页面填写表单时（尤其是在用户注册时），需要对用户输入的内容进行实时校验，防止用户填错。如果通过<input>标签失去焦点再调用相关方法进行校验比较繁琐。

二、原因分析

    使用<input>失去焦点再调用相关方法比较繁琐，不适用。

三、解决措施（使用validate插件进行校验）

    1、引入validate插件。该插件是在jQuery插件的基础上的，所以在引入该插件前需要先引入jQuery插件。

    2、编写Script代码。

    表单验证的格式：$("form表单的选择器").validate(json数据格式);  //键值对  键：值（{}）

    json数据格式：

        {
      rules:{
            表单项name值:校验规则，
            表单项name值:校验规则... ...
              },
      messages:{
            表单项name值:错误提示信息，
            表单项name值:错误提示信息... ...
              }

    }

    其中：校验规则，可以是一个也可以是多个，如果是多个使用json格式。 

    示例：对用户名进行校验。在$(function()){}中通过id找到需要进行校验的表单，并通过validate()方法进行校验。方法是：在()内均为JSON格式的数据，校验规则rules:{规则}，校验不通过的提示信息messages:{提示信息}。具体代码如下：

$(function(){
   $("#registerform").validate({
      rules:{//校验规则关键字
	username:{//需要校验的输入框名称（注意：输入框只能通过其name属性获得，无法通过ID等方式获得）
	  required:true,//是否必须填写
	  rangelength:[3,12]//长度要求
        }
      },
      messages:{//校验不通过时的提示信息
	 username:{//与规则里面的名称对应
	   required:"用户名不能为空！",//校验不通过的提示信息（这里是必填而未填的提示信息）
	   rangelength:$.validator.format("用户名长度在必须为：{0}-{1}之间")//校验不通过的提示信息（这里是长度不符合要求）
	 }
      }
    });
  });

    说明：在rules和messages里面的username都是<input>的name属性。

    3、validate其他具体的规则条件请查阅API文档。

    常用校验规则如下：