注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐

Jquery.validate表单验证小结  

2010-11-25 22:26:59|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

2010/11/25

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

准备:style.css – 样式文件        jquery.js – Jquery源文件             jquery.validate.js – Jquery 校验文件          jquery.metadata.js  --  使用class形式的校验必须的js文件validate.html   --    表单校验的HTML文件  messages_cn.js – 国际化校验信息< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />

来源:

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

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

 

style.css 源代码如下:

/**

 *

 *  @DO 校验的样式文件

 *  @DATE 2010-11-25

 *  @AUTHOR TEANA

 *

 */

 /*错误样式*/

label.error {

    padding-left: 16px;

    margin-left: 2px;

    color:red;

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

    background: url(resources/images/unchecked.gif) no-repeat 0px 0px;

}

/*验证通过样式*/

label.valid {

    padding-left: 16px;

    margin-left: 2px;

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

    background: url(resources/images/checked.gif) no-repeat 0px 0px;

}

validate.html源代码如下:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

<title>JQuery表单验证</title>

<link rel="stylesheet" type="text/css" href="style.css" />

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="jquery.metadata.js"></script>

    <script type="text/javascript" src="jquery.validate.js"></script>

    <script type="text/javascript" src="messages_cn.js"></script>

    <script type="text/javascript">

    $(function()

    {

    $("#miloForm").validate(

    {

            success:function(label)

            {

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

            }

        }

    );

   }

    );

    </script>

  </head>

  <body>

        <form id="miloForm" method="post" action="">

            <p>

                <label for="firstname">

                    姓名:

                </label>

                <input id="firstname" name="firstname" class="{required:true,minlength:5,messages:{required:'姓名必输入'}}" />

            </p>

            <p>

                <label for="email">

                    邮箱:

                </label>

                <input id="email" name="email" class="{required:true,email:true,messages:{required:'邮箱必输入'}}" />

            </p>

            <p>

                <label for="password">

                    密码:

                </label>

                <input id="password" name="password" type="password"

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

            </p>

            <p>

                <label for="confirm_password">

                    确认密码:

                </label>

                <input id="confirm_password" name="confirm_password" type="password"

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

            </p>

            <p>

                <input class="submit" type="submit" value="Submit" />

            </p>

        </form>

    </body>

</html>

 

小结:

  $(function()

    {

    $("#miloForm").validate(

    {

            success:function(label)

            {

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

            }

        }

    );

   }

    );

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

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

表示:必输入项,长度必须大于等于5,如果没有输入内容,则显示的校验信息为:姓名必输入。

  评论这张
 
阅读(714)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017