2010/11/25

说明：用Jquery.validate实现表单验证。

准备：– 样式文件  – Jquery源文件  – Jquery 校验文件  jquery.metadata.js  --  使用class形式的校验必须的js文件validate.html   表单校验的HTML文件  messages_cn.js – 国际化校验信息

来源：

官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

API： http://jquery.bassistance.de/api-browser/plugins.html

源代码如下：

/**

 *

 *    @DO 校验的样式文件

 *    @DATE 2010-11-25

 *    @AUTHOR TEANA

 *

 */

 /*错误样式*/

label.error { 

    padding-left: 16px; 

    margin-left: 2px; 

    color:red; 

    /*背景图片（校验未通过的’叉’图标）*/

    background:  no-repeat 0px 0px; 

}

/*验证通过样式*/

label.valid {

    padding-left: 16px; 

    margin-left: 2px;

    /*背景图片(校验通过的’勾’图标)*/

    background:  no-repeat 0px 0px; 

}

validate.html源代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

    $(function()

      {

        $("#miloForm").validate(

        {

            success:function(label)

            {

                    label.html(" ").addClass("valid");    

            }

        }

        );

       }

    );

                    姓名：

                    邮箱：

                    密码：

                                    class="{required:true,minlength:5,messages:{required:'密码必输入'}}" />

                    确认密码：

                                    class="{required:true,minlength:5,equalTo:'#password',messages:{required:'确认密码必输入',equalTo:'确认密码与密码必须一致'}}" />

小结：

  $(function()

      {

        $("#miloForm").validate(

        {

            success:function(label)

            {

                    label.html(" ").addClass("valid");    

            }

        }

        );

       }

    );

此处是为表单添加校验，并且添加校验成功的校验信息的效果，对于要校验的内容，如 我们在class属性中定义校验规则：

如：class="{required:true,minlength:5,messages:{required:'姓名必输入'}}"

表示：必输入项，长度必须大于等于5，如果没有输入内容，则显示的校验信息为：姓名必输入。下载本文