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文档。

    常用校验规则如下:

    

猜你喜欢

转载自blog.csdn.net/baifenbaizhenxin/article/details/79596239