jquery:validate的例子

该文档转载自 http://ideabean.javaeye.com/blog/363927

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery表单验证例子</title>

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

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

<!--[if lte IE 6]>

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

<![endif]-->  

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

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

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

<script>

function checkidcard(num){

    var len = num.length, re;

    if (len == 15)

        re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);

    else if (len == 18)

        re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);

    else{

        //alert("请输入15或18位身份证号,您输入的是 "+len+ "位");

        return false;

    }

    var a = num.match(re);

    if (a != null){

        if (len==15){

            var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);

            var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];

        }else{

            var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);

            var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];

        }

        if (!B){

            //alert("输入的身份证号 "+ a[0] +" 里出生日期不对！");

            return false;

        }

    }  

    return true;

}

</script>  

<script type="text/javascript">

    $.validator.setDefaults({

        submitHandler: function() { alert("submitted!"); }

    });  

    // 添加验证方法 (身份证号码验证)

    jQuery.validator.addMethod("isIdCardNo", function(value, element) {

        return this.optional(element) || checkidcard(value);

    }, "请正确输入您的身份证号码");   

    $().ready(function() {

        $("#firstform").validate();  

        $("#secondform").validate({

            /*errorLabelContainer: "#messageBox",       //显示错误信息的容器ID

            wrapper: "li",                              //包含每个错误信息的容器*/

            rules:{

                xm:{

                    required: true,

                    minlength: 2,

                    maxlength: 5

                },

                pwd:{

                    required: true,

                    minlength: 6

                },

                confirm_pwd:{

                    required: true,

                    equalTo: "#pwd"

                },

                f2csrq:{

                    required: true,

                    date: true

                },

                f2xjzd: {

                    required: true

                },

                f2sfzh:{

                    /*digits: true,

                    rangelength: [18,20]*/

                    required: true,

                    isIdCardNo: true

                }

            },

            messages:{

                xm:{

                    required: "请填写姓名",

                    minlength: "字符长度不能小于2个字符",

                    maxlength: "字符长度不能大于5个字符"

                },

                pwd:{

                    required: "请填写密码",

                    minlength: "字符长度不能小于6个字符"

                },

                confirm_pwd:{

                    required: "请再次输入密码",

                    equalTo: "密码不一致"

                },

                f2csrq:{

                    required: "请输入出生日期",

                    date: "日期格式不正确(例：2009/04/07)"

                },

                f2xjzd:{

                    required: "请输入地址"

                },

                f2sfzh:{

                    /*digits: "身份证号码只能为数字",

                    rangelength: "身份号码长度为18～20个字符"*/

                    required: "请输入身份证号",

                    isIdCardNo: "身份证号不正确"

                }

            }

        });  

        /*// 输入框获得焦点时，样式设置

        $('input').focus(function(){

            if($(this).is(":text") || $(this).is(":password"))

                $(this).addClass('focus');

            if ($(this).hasClass('have_tooltip')) {

                $(this).parent().parent().removeClass('field_normal').addClass('field_focus');

            }

        });     

        // 输入框失去焦点时，样式设置

        $('input').blur(function() {

            $(this).removeClass('focus');

            if ($(this).hasClass('have_tooltip')) {

                $(this).parent().parent().removeClass('field_focus').addClass('field_normal');

            }

        });*/

    });

</script>

</head>  

<body>

<div id="header"></div>

<div id="main">  

<form id="firstform" method="get" action="">

    <fieldset>

        <legend>jQuery验证</legend>

        <div id="xm" class="owinput">

            <div class="owlabel">

                <label class="req" for="xm"> 姓  名 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="xm" class="required" minlength="2"> </span>

            </div>

        </div>  

        <div id="xb" class="owinput">

            <div class="owlabel">

                <label class="req" for="f1pwd"> 密  码 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input id="f1pwd" name="f1pwd" class="required" minlength="6"> </span>

            </div>

        </div>  

        <div id="xb" class="owinput">

            <div class="owlabel">

                <label class="req" for="f1pwd2"> 密码确认 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input value="" name="f1pwd2" type="text" class="required" equalTo="#f1pwd"> </span>

            </div>

        </div>  

        <div id="csrq" class="owinput">

            <div class="owlabel">

                <label class="req" for="f1csrq"> 出生日期 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="f1csrq" type="text" class="required date"> </span>

            </div>

        </div>  

        <div id="xjzd" class="owinput">

            <div class="owlabel">

                <label class="req" for="f1xjzd"> 现居住地 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input  name="f1xjzd" type="text" class="required"> </span>

            </div>

        </div>  

        <div id="sfzh" class="owinput">

            <div class="owlabel">

                <label class="req" for="f1sfzh"> 身份证号 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="f1sfzh" type="text" class="required isIdCardNo" minlength="18" maxlength="19"> </span>

            </div>

        </div>

    </fieldset>  

    <div id="regSubmit">

        <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">

            <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提  交</button><b class="bl"><b class="br"></b></b>

        </span>

        <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">

            <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取  消</button><b class="bl"><b class="br"></b></b>

        </span>

    </div>

</form>  

<form id="secondform">

    <fieldset>

        <legend>自定义jQuery验证</legend>

        <div id="xm" class="owinput">

            <div class="owlabel">

                <label class="req" for="xm"> 姓  名 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="xm" type="text"> </span>

            </div>

        </div>  

        <div id="xb" class="owinput">

            <div class="owlabel">

                <label class="req" for="pwd"> 密  码 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input id="pwd" name="pwd" type="text"> </span>

            </div>

        </div>  

        <div id="xb" class="owinput">

            <div class="owlabel">

                <label class="req" for="confirm_pwd"> 密码确认 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="confirm_pwd" type="text"> </span>

            </div>

        </div>  

        <div id="csrq" class="owinput">

            <div class="owlabel">

                <label class="req" for="f2csrq"> 出生日期 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="f2csrq" type="text"> </span>

            </div>

        </div>  

        <div id="xjzd" class="owinput">

            <div class="owlabel">

                <label class="req" for="f2xjzd"> 现居住地 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input value="" name="f2xjzd" type="text"> </span>

            </div>

        </div>  

        <div id="sfzh" class="owinput">

            <div class="owlabel">

                <label class="req" for="f2sfzh"> 身份证号 :</label>

            </div>

            <div class="owfield">

                <span class="inp"> <input name="f2sfzh" type="text"> </span>

            </div>

        </div>

    </fieldset>

    <div id="messageBox"></div> <!-- 此容器用于汇总显示错误信息 -->

    <div id="regSubmit">

        <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">

            <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提  交</button><b class="bl"><b class="br"></b></b>

        </span>

        <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">

            <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取  消</button><b class="bl"><b class="br"></b></b>

        </span>

    </div>

</form>

</div>

<div id="footer"></div>

</body>

</html>

文章来自：http://www.cnblogs.com/chenxizhang/archive/2010/01/24/1655311.html

jquery:validate的例子的更多相关文章

jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...
jQuery Validate 验证，校验规则写在控件中的具体例子
将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...
jquery validate表单验证插件-推荐
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
ASP.NET MVC 5 Jquery Validate
ClientValidationEnabled 在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置应用ValidationAttrib ...
jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
jquery.validate使用 - 1
jquery.validate使用攻略好几年不写JS了,资料整理起来比较慢,格式也有点乱主要分几部分jquery.validate 基本用法jquery.validate API说明jquery. ...
ASP.NET MVC和WebForm 轻松实现前端和后端的双重验证 jquery.validate+ValidationSugar
上次不足的改进可能上一个贴子给大家带来很多误解,所以我这次把DEMO完善了两个版本 [ASP.NET WEBFROM]和[ ASP.NET MVC] 修改了一些BUG,并且修改了一些细了在上个贴子 ...

随机推荐

Netty（五）序列化protobuf在netty中的使用
protobuf是google序列化的工具,主要是把数据序列化成二进制的数据来传输用的.它主要优点如下: 1.性能好,效率高: 2.跨语言(java自带的序列化,不能跨语言) protobuf参考文档 ...
Object.prototype和Function.prototype一些常用方法
Object.prototype 方法: hasOwnProperty 概念:用来判断一个对象中的某一个属性是否是自己提供的(主要是判断属性是原型继承还是自己提供的) 语法:对象.hasOwnProp ...
angularJs
学了差不多一个礼拜,感觉这个库还是很不错的,在应用中一些小笔记,其实这些笔记现在来看确实很基础,但是把这个博客当成我自己的一个记录历程,所以我也把这点笔记拿上来: 1.是一个js框架,是一个以js语言 ...
compileDebugJavaWithJavac
学习笔记 compileDebugJavaWithJavac,缺少插件,在module app gradle文件最上面添加一段 apply plugin: 'me.tatarka.retrolambd ...
IOS开发基础知识--碎片18
1:initWithFrame方法的理解 . initWithFrame方法是什么? initWithFrame方法用来初始化并返回一个新的视图对象,根据指定的CGRect(尺寸). 当然,其他UI对 ...
Tableview中Dynamic Prototypes动态表的使用
Tableview时IOS中应用非常广泛的控件,当需要动态的添加多条不同的数据时,需要用动态表来实现,下面给出一个小例子,适用于不确定Section的数目,并且每个Section中的行数也不同的情况, ...
Java打印九九乘法表
package com.czgo; /** * 九九乘法表 * * @author AlanLee * */ public class Print99 { public static void mai ...
机器学习实战笔记(Python实现)-01-K近邻算法(KNN)
--------------------------------------------------------------------------------------- 本系列文章为<机器 ...
MySQL 复制表
MySQL 复制表如果我们需要完全的复制MySQL的数据表,包括表的结构,索引,默认值等. 如果仅仅使用CREATE TABLE ... SELECT 命令,是无法实现的. 本文将为大家介绍如何完整 ...
Python列表list的用法
#!usr/bin/env python# -*-coding:utf-8-*-#以下方法全在python2.7.x版本运行,请3.x以上的小伙伴们在print(放入括号内执行)#list列表的常用方 ...

jquery:validate的例子

jquery:validate的例子的更多相关文章

随机推荐

热门专题