jQuery 教程

本页目录

jQuery Validate

jQuery Validate

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。

访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。

导入 js 库

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

默认校验规则

序号	规则	描述
1	required:true	必须输入的字段。
2	remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:"#field"	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

默认提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

jQuery Validate提供了中文信息提示包，位于下载包的 dist/localization/messages_zh.js，内容如下：

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
});

}));

你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面：

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

使用方式

1、将校验规则写到控件中

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

2、将校验规则写到 js 代码中

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
     }
    })
});

messages 处，如果某个控件没有 message，将调用默认的信息

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

required: true 值是必须的。 required: "#aa:checked" 表达式的值为真，则需要验证。 required: function(){} 返回为真，表示需要验证。

后边两种常用于，表单中需要同时填或不填的元素。

常用方法及注意问题

1、用其他方式替代默认的 SUBMIT

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

使用 ajax 方式

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 })

可以设置 validate 的默认值，写法如下：

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

如果想提交表单, 需要使用 form.submit()，而不要使用 $(form).submit()。

2、debug，只验证不提交表单

如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

如果一个页面中有多个表单都想设置成为 debug，则使用：

$.validator.setDefaults({
   debug: true
})

3、ignore：忽略某些元素不验证

ignore: ".ignore"

4、更改错误信息显示的位置

errorPlacement：Callback

指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

实例

<p>将错误信息放在 label 元素后并使用 span 元素包裹它</p>

<form method="get" class="cmxform" id="form1" action="">
  <fieldset>
    <legend>Login Form</legend>
    <p>
      <label for="user">Username</label>
      <input id="user" name="user" required minlength="3">
    </p>
    <p>
      <label for="password">Password</label>
      <input id="password" type="password" maxlength="12" name="password" required minlength="5">
    </p>
    <p>
      <input class="submit" type="submit" value="Login">
    </p>
  </fieldset>
</form>

代码的作用是：一般情况下把错误信息显示在 <td class="status"></td> 中，如果是 radio 则显示在 <td></td> 中，如果是 checkbox 则显示在内容的后面。

参数	类型	描述	默认值
errorClass	String	指定错误提示的 css 类名，可以自定义错误提示的样式。	"error"
errorElement	String	用什么标签标记错误，默认是 label，可以改成 em。	"label"
errorContainer	Selector	显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer	Selector	把错误信息统一放在一个容器里面。
wrapper	String	用什么标签再把上边的 errorELement 包起来。

一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏。

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

5、更改错误信息显示的样式

设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个 validation.css，专门用于维护校验文件的样式。

input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;
}
label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

6、每个字段验证通过执行函数

success：String,Callback

要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。

success: function(label) {
    // set &nbsp; as text for IE
    label.html("&nbsp;").addClass("checked");
    //label.addClass("valid").text("Ok!")
}

添加 "valid" 到验证元素，在 CSS 中定义的样式 <style>label.valid {}</style>。

success: "valid"

7、验证的触发方式修改

下面的虽然是 boolean 型的，但建议除非要改为 false，否则别乱添加。

触发方式	类型	描述	默认值
onsubmit	Boolean	提交时验证。设置为 false 就用其他方法去验证。	true
onfocusout	Boolean	失去焦点时验证（不包括复选框/单选按钮）。	true
onkeyup	Boolean	在 keyup 时验证。	true
onclick	Boolean	在点击复选框和单选按钮时验证。	true
focusInvalid	Boolean	提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。	true
focusCleanup	Boolean	如果是 true 那么当未通过验证的元素获得焦点时，移除错误提示。避免和 focusInvalid 一起用。	false

// 重置表单
$().ready(function() {
 var validator = $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
    $("#reset").click(function() {
        validator.resetForm();
    });

});

8、异步验证

remote：URL

使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。

remote: "check-email.php"

remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}

远程地址只能输出 "true" 或 "false"，不能有其他输出。

9、添加自定义校验

addMethod：name, method, message

自定义验证方法

// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for(var i = 0; i < value.length; i++){
        if(value.charCodeAt(i) > 127){
            length++;
        }
    }
  return this.optional(element) || ( length >= param[0] && length <= param[1] );   
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

// 邮政编码验证   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

注意：要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。

注意：在 messages_cn.js 文件中添加：isZipCode: "只能包括中文字、英文字母、数字和下划线"。调用前要添加对 additional-methods.js 文件的引用。

10、radio 和 checkbox、select 的验证

radio 的 required 表示必须选中一个。

<input  type="radio" id="gender_male" value="m" name="gender" required />
<input  type="radio" id="gender_female" value="f" name="gender"/>

checkbox 的 required 表示必须选中。

<input type="checkbox" class="checkbox" id="agree" name="agree" required />

checkbox 的 minlength 表示必须选中的最小个数，maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

select 的 required 表示选中的 value 不能为空。

<select id="jungle" name="jungle" title="Please select something!" required>
    <option value=""></option>
    <option value="1">Buga</option>
    <option value="2">Baga</option>
    <option value="3">Oi</option>
</select>

select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
    <option value="b">Banana</option>
    <option value="a">Apple</option>
    <option value="p">Peach</option>
    <option value="t">Turtle</option>
</select>

jQuery.validate 中文 API

名称	返回类型	描述
validate(options)	Validator	验证所选的 FORM。
valid()	Boolean	检查是否验证通过。
rules()	Options	返回元素的验证规则。
rules("add",rules)	Options	增加验证规则。
rules("remove",rules)	Options	删除验证规则。
removeAttrs(attributes)	Options	删除特殊属性并且返回它们。
自定义选择器
:blank	Validator	没有值的筛选器。
:filled	Array <Element>	有值的筛选器。
:unchecked	Array <Element>	没选择的元素的筛选器。
实用工具
jQuery.format(template,argument,argumentN...)	String	用参数代替模板中的 {n}。

Validator

validate 方法返回一个 Validator 对象。Validator 对象有很多方法可以用来引发校验程序或者改变 form 的内容，下面列出几个常用的方法。

名称	返回类型	描述
form()	Boolean	验证 form 返回成功还是失败。
element(element)	Boolean	验证单个元素是成功还是失败。
resetForm()	undefined	把前面验证的 FORM 恢复到验证前原来的状态。
showErrors(errors)	undefined	显示特定的错误信息。
Validator 函数
setDefaults(defaults)	undefined	改变默认的设置。
addMethod(name,method,message)	undefined	添加一个新的验证方法。必须包括一个独一无二的名字，一个 JAVASCRIPT 的方法和一个默认的信息。
addClassRules(name,rules)	undefined	增加组合验证类型，在一个类里面用多种验证方法时比较有用。
addClassRules(rules)	undefined	增加组合验证类型，在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。

内置验证方式

名称	返回类型	描述
required()	Boolean	必填验证元素。
required(dependency-expression)	Boolean	必填元素依赖于表达式的结果。
required(dependency-callback)	Boolean	必填元素依赖于回调函数的结果。
remote(url)	Boolean	请求远程校验。url 通常是一个远程调用方法。
minlength(length)	Boolean	设置最小长度。
maxlength(length)	Boolean	设置最大长度。
rangelength(range)	Boolean	设置一个长度范围 [min,max]。
min(value)	Boolean	设置最小值。
max(value)	Boolean	设置最大值。
email()	Boolean	验证电子邮箱格式。
range(range)	Boolean	设置值的范围。
url()	Boolean	验证 URL 格式。
date()	Boolean	验证日期格式（类似 30/30/2008 的格式，不验证日期准确性只验证格式）。
dateISO()	Boolean	验证 ISO 类型的日期格式。
dateDE()	Boolean	验证德式的日期格式（29.04.1994 或 1.1.2006）。
number()	Boolean	验证十进制数字（包括小数的）。
digits()	Boolean	验证整数。
creditcard()	Boolean	验证信用卡号。
accept(extension)	Boolean	验证相同后缀名的字符串。
equalTo(other)	Boolean	验证两个输入框的内容是否相同。
phoneUS()	Boolean	验证美式的电话号码。

validate ()的可选项

描述	代码
debug：进行调试模式（表单不提交）。	$(".selector").validate ({ debug:true })
把调试设置为默认。	$.validator.setDefaults({ debug:true })
submitHandler：通过验证后运行的函数，里面要加上表单提交的函数，否则表单不会提交。	$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); } })
ignore：对某些元素不进行验证。	$("#myform").validate({ ignore:".ignore" })
rules：自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象。	$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } } })
messages：自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数。	$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }, messages:{ name:"Name不能为空", email:{ required:"E-mail不能为空", email:"E-mail地址不正确" } } })
groups：对一组元素的验证，用一个错误提示，用 errorPlacement 控制把出错信息放在哪里。	$("#myform").validate({ groups:{ username:"fname lname" }, errorPlacement:function(error,element) { if (element.attr("name") == "fname" \|\| element.attr("name") == "lname") error.insertAfter("#lastname"); else error.insertAfter(element); }, debug:true })
OnSubmit：类型 Boolean，默认 true，指定是否提交时验证。	$(".selector").validate({ onsubmit:false })
onfocusout：类型 Boolean，默认 true，指定是否在获取焦点时验证。	$(".selector").validate({ onfocusout:false })
onkeyup：类型 Boolean，默认 true，指定是否在敲击键盘时验证。	$(".selector").validate({ onkeyup:false })
onclick：类型 Boolean，默认 true，指定是否在鼠标点击时验证（一般验证 checkbox、radiobox）。	$(".selector").validate({ onclick:false })
focusInvalid：类型 Boolean，默认 true。提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）会获得焦点。	$(".selector").validate({ focusInvalid:false })
focusCleanup：类型 Boolean，默认 false。当未通过验证的元素获得焦点时，移除错误提示（避免和 focusInvalid 一起使用）。	$(".selector").validate({ focusCleanup:true })
errorClass：类型 String，默认 "error"。指定错误提示的 css 类名，可以自定义错误提示的样式。	$(".selector").validate({ errorClass:"invalid" })
errorElement：类型 String，默认 "label"。指定使用什么标签标记错误。	$(".selector").validate errorElement:"em" })
wrapper：类型 String，指定使用什么标签再把上边的 errorELement 包起来。	$(".selector").validate({ wrapper:"li" })
errorLabelContainer：类型 Selector，把错误信息统一放在一个容器里面。	$("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") } })
showErrors：跟一个函数，可以显示总共有多少个未通过验证的元素。	$(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below."); this.defaultShowErrors(); } })
errorPlacement：跟一个函数，可以自定义错误放到哪里。	$("#myform").validate({ errorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true })
success：要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。	$("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") } })
highlight：可以给未通过验证的元素加效果、闪烁等。

addMethod(name,method,message)方法

参数 name 是添加的方法的名字。

参数 method 是一个函数，接收三个参数 (value,element,param) 。 value 是元素的值，element 是元素本身，param 是参数。

我们可以用 addMethod 来添加除内置的 Validation 方法之外的验证方法。比如有一个字段，只能输一个字母，范围是 a-f，写法如下：

$.validator.addMethod("af",function(value,element,params){  
    if(value.length>1){
        return false;
    }
    if(value>=params[0] && value<=params[1]){
        return true;
    }else{
        return false;
    }
},"必须是一个字母,且a-f");

如果有个表单字段的 name="username"，则在 rules 中写：

username:{
   af:["a","f"]
}

addMethod 的第一个参数，是添加的验证方法的名字，这时是 af。 addMethod 的第三个参数，是自定义的错误提示，这里的提示为:"必须是一个字母,且a-f"。 addMethod 的第二个参数，是一个函数，这个比较重要，决定了用这个验证方法时的写法。

如果只有一个参数，直接写，比如 af:"a"，那么 a 就是这个唯一的参数，如果多个参数，则写在 [] 里，用逗号分开。

meta String 方式

$("#myform").validate({

   meta:"validate",

   submitHandler:function() { 
alert("Submitted!") }

})

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

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

<form id="myform">

  <input type="text" 
name="email" class="{validate:{ required:true,email:true }}" />

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

</form>

实例演示

虚构的实例

错误消息容器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试 jQuery validate() 插件</title>
    <link rel="stylesheet" media="screen" href="//static.runoob.com/assets/jquery-validation-1.14.0/demo/css/screen.css">
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <style>
    .cmxform fieldset p.error label {
        color: red;
    }
    div.container {
        background-color: #eee;
        border: 1px solid red;
        margin: 5px;
        padding: 5px;
    }
    div.container ol li {
        list-style-type: disc;
        margin-left: 20px;
    }
    div.container {
        display: none
    }
    .container label.error {
        display: inline;
    }
    form.cmxform {
        width: 30em;
    }
    form.cmxform label.error {
        display: block;
        margin-left: 1em;
        width: auto;
    }
    </style>
    <script>
    // 只用于测试
    $.validator.setDefaults({
        submitHandler: function() {
            alert("提交事件! (取消跳过验证)");
        }
    });

    $().ready(function() {
        $("#form1").validate({
            errorLabelContainer: $("#form1 div.error")
        });

        var container = $('div.container');
        // 提交时验证表单
        var validator = $("#form2").validate({
            errorContainer: container,
            errorLabelContainer: $("ol", container),
            wrapper: 'li'
        });

        $(".cancel").click(function() {
            validator.resetForm();
        });
    });
    </script>
</head>

<body>    
    <div id="main">
        <form method="get" class="cmxform" id="form1" action="">
            <fieldset>
                <legend>登录框</legend>
                <p>
                    <label>用户名</label>
                    <input name="user" title="请输入用户名 (至少三个字母)" required minlength="3">
                </p>
                <p>
                    <label>密码</label>
                    <input type="password" maxlength="12" name="password" title="请输入密码，字母在 5 到 12 个之间" required minlength="5">
                </p>
                <div class="error">
                </div>
                <p>
                    <input class="submit" type="submit" value="Login">
                </p>
            </fieldset>
        </form>
        <!-- our error container -->
        <div class="container">
            <h4>在你提交表单时出现了以下错误，详情如下：</h4>
            <ol>
                <li>
                    <label for="email" class="error">请输入邮箱地址。</label>
                </li>
                <li>
                    <label for="phone" class="error">请输入电话号码 ( 2 到 8 个字母)</label>
                </li>
                <li>
                    <label for="address" class="error">请输入地址 (至少三个字母)</label>
                </li>
                <li>
                    <label for="avatar" class="error">请选择图片 (png, jpg, jpeg, gif)</label>
                </li>
                <li>
                    <label for="cv" class="error">请选择文档 (doc, docx, txt, pdf)</label>
                </li>
            </ol>
        </div>
        <form class="cmxform" id="form2" method="get" action="">
            <fieldset>
                <legend>验证完整表单</legend>
                <p>
                    <label for="email">Email</label>
                    <input id="email" name="email" required type="email">
                </p>
                <p>
                    <label for="agree">喜欢的颜色</label>
                    <select id="color" name="color" title="请选择你喜欢的颜色!" required>
                        <option></option>
                        <option>Red</option>
                        <option>Blue</option>
                        <option>Yellow</option>
                    </select>
                </p>
                <p>
                    <label for="phone">电话</label>
                    <input id="phone" name="phone" required type="number" rangelength="[2,8]">
                </p>
                <p>
                    <label for="address">地址</label>
                    <input id="address" name="address" required minlength="3">
                </p>
                <p>
                    <label for="avatar">头像</label>
                    <input type="file" id="avatar" name="avatar" required>
                </p>
                <p>
                    <label for="agree">请同意我们的声明</label>
                    <input type="checkbox" class="checkbox" id="agree" title="请同意我们的声明!" name="agree" required>
                </p>
                <p>
                    <input class="submit" type="submit" value="提交">
                    <input class="cancel" type="submit" value="取消">
                </p>
            </fieldset>
        </form>        
    </div>
</body>
</html>

自定义消息作为元素数据

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Validate 插件 - 自定义消息作为元素数据</title>

<link rel="stylesheet" media="screen" href="//static.runoob.com/assets/jquery-validation-1.14.0/demo/css/screen.css">
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#commentForm").validate();
    $("#commentForm2").validate({
        messages: {
            email: {
                required: '请输入！'
            }
        }
    });

});
</script>

<style type="text/css">
form { width: 500px; }
form label { width: 250px; }
form label.error,
form input.submit { margin-left: 253px; }
</style>

</head>
<body>

<div id="main">

<p>本实例演示了如何通过元数据自定义消息。</p>

<!-- 通过 data- 属性自定义规则和消息 -->
<form class="cmxform" id="commentForm" method="post" action="">
    <fieldset>
        <legend>请输入您的电子邮件地址</legend>
        <p>

            <label for="cemail">E-Mail *</label>
            <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="请输入您的电子邮件地址" data-msg-email="请输入一个有效的电子邮件地址" />
        </p>
        <p>
            <input class="submit" type="submit" value="提交"/>
        </p>
    </fieldset>
</form>

<!-- 自定义通过 validate 选项重载的元数据中 "required" 的消息 -->
<form class="cmxform" id="commentForm2" method="post" action="">
    <fieldset>
        <legend>请输入您的电子邮件地址</legend>
        <p>

            <label for="cemail">E-Mail *</label>
            <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="请输入一个有效的电子邮件地址" />
        </p>
        <p>
            <input class="submit" type="submit" value="提交"/>
        </p>
    </fieldset>
</form>

</body>
</html>

radio（单选按钮）、checkbox（复选按钮）和 select（下拉框）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Validate 插件 - radio（单选按钮）、checkbox（复选按钮）和 select（下拉框）</title>

<link rel="stylesheet" media="screen" href="//static.runoob.com/assets/jquery-validation-1.14.0/demo/css/screen.css">
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

<script>
// 只用于演示
$.validator.setDefaults({
    submitHandler: function() {
        alert("submitted!");
    }
});

$(document).ready(function() {
    $("#form1").validate();
    $("#selecttest").validate();
});
</script>

<style>
.block { display: block; }
form.cmxform label.error { display: none; }
</style>

</head>
<body>

<div id="main">

<form class="cmxform" id="form1" method="get" action="">
    <fieldset>
        <legend>通过 radio（单选按钮）和 checkbox（复选按钮）验证表单</legend>
        <fieldset>
            <legend>性别</legend>
            <label for="gender_male">
                <input  type="radio" id="gender_male" value="m" name="gender" required>
                男性
            </label>
            <label for="gender_female">
                <input  type="radio" id="gender_female" value="f" name="gender">
                女性
            </label>
            <label for="gender" class="error">请选择您的性别。</label>
        </fieldset>
        <fieldset>
            <legend>婚姻状况</legend>
            <label for="family_single">
                <input  type="radio" id="family_single" value="s" name="family" required>
                单身
            </label>
            <label for="family_married">
                <input  type="radio" id="family_married" value="m" name="family">
                已婚
            </label>
            <label for="family_other">
                <input  type="radio" id="family_other" value="o" name="family">
                其他
            </label>
            <label for="family" class="error">您选择您的婚姻状况。</label>
        </fieldset>
        <p>
            <label for="agree">请同意我们的条款</label>
            <input type="checkbox" class="checkbox" id="agree" name="agree" required>
            <br>
            <label for="agree" class="error block">请同意我们的条款！</label>
        </p>
        <fieldset>
            <legend>垃圾邮件</legend>
            <label for="spam_email">
                <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2">
                垃圾邮件 - E-Mail
            </label>
            <label for="spam_phone">
                <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]">
                垃圾邮件 - Phone
            </label>
            <label for="spam_mail">
                <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]">
                垃圾邮件 - Mail
            </label>
            <label for="spam[]" class="error">请选择至少两种类型的垃圾邮件。</label>
        </fieldset>
        <p>
            <input class="submit" type="submit" value="提交">
        </p>
    </fieldset>
</form>

<form id="selecttest">
    <h2>一些关于 select 的测试</h2>
    <p>
        <label for="jungle">请选择一个丛林名词</label><br>
        <select id="jungle" name="jungle" title="请选择一个丛林名词！" required>
            <option value=""></option>
            <option value="1">Buga</option>
            <option value="2">Baga</option>
            <option value="3">Oi</option>
        </select>
    </p>

    <p>
        <label for="fruit">请选择至少两种水果</label><br>
        <select id="fruit" name="fruit" title="请选择至少两种水果！" required minlength="2" multiple="multiple">
            <option value="b">Banana</option>
            <option value="a">Apple</option>
            <option value="p">Peach</option>
            <option value="t">Turtle</option>
        </select>
    </p>

    <p>
        <label for="vegetables">请选择不超过两种蔬菜</label><br>
        <select id="vegetables" name="vegetables" title="请选择不超过两种蔬菜！" required maxlength="2" multiple="multiple">
            <option value="p">Potato</option>
            <option value="t">Tomato</option>
            <option value="s">Salad</option>
        </select>
    </p>

    <p>
        <label for="cars">请选择至少两种但不超过三种汽车</label><br>
        <select id="cars" name="cars" title="请选择至少两种但不超过三种汽车！" required rangelength="[2,3]" multiple="multiple">
            <option value="m_sl">Mercedes SL</option>
            <option value="o_c">Opel Corsa</option>
            <option value="vw_p">VW Polo</option>
            <option value="t_s">Titanic Skoda</option>
        </select>
    </p>

    <p><input type="submit" value="Validate Select 测试"></p>
</form>

</div>


</body>
</html>

与表单（Form）插件的交互（AJAX 提交）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Validate 插件 - 与表单（Form）插件的交互（AJAX 提交）</title>
<link rel="stylesheet" media="screen" href="//static.runoob.com/assets/jquery-validation-1.14.0/demo/css/screen.css">
<style type="text/css">
.warning { color: red; }
</style>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.mockjax.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib//jquery.form.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
jQuery(function() {
  $.mockjax({
    url: "login.action",
    response: function(settings) {
      var user = settings.data.match(/user=(.+?)($|&)/)[1],
        password = settings.data.match(/password=(.+?)($|&)/)[1];
      if (password !== "foobar") {
        this.responseText = "Your password is wrong (must be foobar).";
        return;
      }
      this.responseText = "Hi " + user + ", welcome back.";
    },
    responseStatus: 200,
    responseTime: 500
  });

  // show a simple loading indicato
  var loader = jQuery('<div id="loader"><img src="images/loading.gif" alt="loading..."></div>')
    .css({
      position: "relative",
      top: "1em",
      left: "25em",
      display: "inline"
    })
    .appendTo("body")
    .hide();
  jQuery().ajaxStart(function() {
    loader.show();
  }).ajaxStop(function() {
    loader.hide();
  }).ajaxError(function(a, b, e) {
    throw e;
  });

  var v = jQuery("#form").validate({
    submitHandler: function(form) {
      jQuery(form).ajaxSubmit({
        target: "#result"
      });
    }
  });

  jQuery("#reset").click(function() {
    v.resetForm();
  });
});
</script>

</head>
<body>

<div id="main">

<form method="post" class="cmxform" id="form" action="form-action.php">
  <fieldset>
    <legend>登录表单（输入 "foobar" 作为密码）</legend>
    <p>
      <label for="user">用户名</label>
      <input id="user" name="user" title="请输入您的用户名（至少 3 个字符）" class="required" minlength="3" />
    </p>
    <p>
      <label for="pass">密码</label>
      <input type="password" name="password" id="password" class="required" minlength"5" />
    </p>
    <p>
      <input class="submit" type="submit" value="登录"/>
    </p>
  </fieldset>
</form>

<div id="result" class="warning">请登录！</div>

<br/>

<button id="reset">重置上面的表单！</button>

</div>


</body>
</html>

自定义方法和消息显示

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Validate 插件 - 自定义方法和消息显示</title>

<link rel="stylesheet" media="screen" href="//static.runoob.com/assets/jquery-validation-1.14.0/demo/css/screen.css">
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

<script type="text/javascript">
  // 扩展当前规则为一个新规则
  
  // 新规则要求输入文本 "buga"，我们也可以定义一个默认的消息
  $.validator.addMethod("buga", function(value) {
    return value == "buga";
  }, '请输入 "buga"！');
  
  // 新规则要求值必须与第一个参数相同
  $.validator.methods.equal = function(value, element, param) {
    return value == param;
  };
  
  $().ready(function() {
    var validator = $("#texttests").bind("invalid-form.validate", function() {
      $("#summary").html("您的表单包含 " + validator.numberOfInvalids() + " 错误，请查看下面的细节。");
    }).validate({
      debug: true,
      errorElement: "em",
      errorContainer: $("#warning, #summary"),
      errorPlacement: function(error, element) {
        error.appendTo( element.parent("td").next("td") );
      },
      success: function(label) {
        label.text("ok!").addClass("success");
      },
      rules: {
        number: {
          required:true,
          minlength:3,
          maxlength:15,
          number:true 
        },
        secret: "buga",
        math: {
          equal: 11 
        }
      }
    });
    
  });
</script>

<style type="text/css">
form.cmxform { width: 50em; }
em.error {
  background:url("/try/jquery/plugins/images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}
em.success {
  background:url("/try/jquery/plugins/images/checked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}

form.cmxform label.error {
  margin-left: auto;
  width: 250px;
}
em.error { color: black; }
#warning { display: none; }
</style>

</head>
<body>

<div id="main">

<form class="cmxform" id="texttests" method="get" action="foo.html">
  <h2 id="summary"></h2>

  <fieldset>
    <legend>自定义方法和错误消息显示</legend>
    <table>
      <tr>
        <td><label for="number">文本框</label></td>
        <td><input id="number" name="number"
          title="请输入至少 3 个但不超过 15 个字符！" />
        </td>
        <td></td>
      </tr>
      <tr>
        <td><label for="secret">密钥</label></td>
        <td><input name="secret" id="secret" /></td>
        <td></td>
      </tr>
      <tr>
        <td><label for="math">7 + 4 = </label></td>
        <td><input id="math" name="math" title="请输入正确的结果！" /></td>
        <td></td>
      </tr>
    </table>
    <input class="submit" type="submit" value="提交"/>
  </fieldset>
</form>

<h3 id="warning">您的表单包含大量的错误！请重新输入。</h3>

</div>


</body>
</html>

动态表单

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Validate 插件 - 动态表单</title>

<link rel="stylesheet" media="screen" href="//static.runoob.com/assets/jquery-validation-1.14.0/demo/css/screen.css">
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

<script type="text/javascript">
// 只用于演示
$.validator.setDefaults({
    submitHandler: function() {
        alert("submitted!");
    }
});
$.validator.messages.max = jQuery.validator.format("Your totals mustn't exceed {0}!");

$.validator.addMethod("quantity", function(value, element) {
    return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]);
}, "请选择项目和数量。");

$().ready(function() {
    $("#orderform").validate({
        errorPlacement: function(error, element) {
            error.appendTo( element.parent().next() );
        },
        highlight: function(element, errorClass) {
            $(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass);
        }
    });

    var template = jQuery.validator.format($.trim($("#template").val()));
    function addRow() {
        $(template(i++)).appendTo("#orderitems tbody");
    }

    var i = 1;
    // 开始时只有一行
    addRow();
    // 点击时添加更多行
    $("#add").click(addRow);

    // 检查 quantity 输入框的 keyup 动作，更新 totals 字段
    $("#orderform").validateDelegate("input.quantity", "keyup", function(event) {
        var totals = 0;
        $("#orderitems input.quantity").each(function() {
            totals += +this.value;
        });
        $("#totals").attr("value", totals).valid();
    });

});
</script>

<style type="text/css">
form.cmxform { width: 50em; }
em.error {
  background:url("/try/jquery/plugins/images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}
em.success {
  background:url("/try/jquery/plugins/images/checked.gif") no-repeat 0px 0px;
  padding-left: 16px;
}

form.cmxform label.error {
    margin-left: auto;
    width: 250px;
}
form.cmxform input.submit {
    margin-left: 0;
}
em.error { color: black; }
#warning { display: none; }
select.error {
    border: 1px dotted red;
}
</style>

</head>
<body>

<div id="main">

<textarea style="display:none" id="template">
    <tr>
        <td>
            <label>{0}. Item</label>
        </td>
        <td class='type'>
            <select name="item-type-{0}">
                <option value="">请选择...</option>
                <option value="0">Learning jQuery</option>
                <option value="1">jQuery Reference Guide</option>
                <option value="2">jQuery Cookbook</option>
                <option vlaue="3">jQuery In Action</option>
                <option value="4">jQuery For Designers</option>
            </select>
        </td>
        <td class='quantity'>
            <input size='4' class="quantity" min="1" id="item-quantity-{0}" name="item-quantity-{0}" />
        </td>
        <td class='quantity-error'></td>
    </tr>
</textarea>

<form id="orderform" class="cmxform" method="get" action="foo.html">
    <h2 id="summary"></h2>

    <fieldset>
        <legend>动态表单</legend>
        <table id="orderitems">
            <tbody>

            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2"><label>总共（最多 25）</label></td>
                    <td class="totals"><input id="totals" name="totals" value="0" max="25" readonly="readonly" size='4' /></td>
                    <td class="totals-error"></td>
                </tr>
                <tr>
                    <td colspan="2">&nbsp;</td>
                    <td><input class="submit" type="submit" value="提交"/></td>
                </tr>
            </tfoot>
        </table>
    </fieldset>
</form>

<button id="add">向表单添加输入框</button>

<h1 id="warning">您的表单包含大量的错误！请重新输入。</h1>

</div>


</body>
</html>

使用 jQuery UI Themeroller 定义表单样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery validation 插件 - ThemeRolldered 实例</title>
    <link rel="stylesheet" media="screen" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css">
    <style>
    body {
        font-size: 62.5%;
    }
    label {
        display: inline-block;
        width: 100px;
    }
    legend {
        padding: 0.5em;
    }
    fieldset fieldset label {
        display: block;
    }
    #commentForm {
        width: 500px;
    }
    #commentForm label {
        width: 250px;
    }
    #commentForm label.error, #commentForm button.submit {
        margin-left: 253px;
    }
    #signupForm {
        width: 670px;
    }
    #signupForm label.error {
        margin-left: 10px;
        width: auto;
        display: inline;
    }
    #newsletter_topics label.error {
        display: none;
        margin-left: 103px;
    }
    </style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
    <fieldset class="ui-widget ui-widget-content ui-corner-all">
        <legend class="ui-widget ui-widget-header ui-corner-all">请提供您的名字、电子邮件地址（不会被公布）和评论</legend>
        <p>
            <label for="cname">请提供您的名字、电子邮件地址（不会被公布）和评论</label>
            <input id="cname" name="name" class="ui-widget-content" minlength="2" required type="text">
            <p>
                <label for="cemail">E-Mail（必填）</label>
                <input id="cemail" name="email" class="ui-widget-content" type="email" required>
            </p>
            <p>
                <label for="curl">E-Mail（必填）</label>
                <input id="curl" name="url" class="ui-widget-content" value="" type="url">
            </p>
            <p>
                <label for="ccomment">您的评论（必填）</label>
                <textarea id="ccomment" name="comment" class="ui-widget-content" required></textarea>
            </p>
            <p>
                <button class="submit" type="submit">提交</button>
            </p>
    </fieldset>
</form>
<form class="cmxform" id="signupForm" method="get" action="">
    <fieldset class="ui-widget ui-widget-content ui-corner-all">
        <legend class="ui-widget ui-widget-header ui-corner-all">验证一个完整的表单</legend>
        <p>
            <label for="firstname">名字</label>
            <input id="firstname" name="firstname" type="text">
        </p>
        <p>
            <label for="lastname">姓氏</label>
            <input id="lastname" name="lastname" type="text">
        </p>
        <p>
            <label for="username">用户名</label>
            <input id="username" name="username" type="text">
        </p>
        <p>
            <label for="password">密码</label>
            <input id="password" name="password" type="password">
        </p>
        <p>
            <label for="confirm_password">确认密码</label>
            <input id="confirm_password" name="confirm_password" type="password">
        </p>
        <p>
            <label for="email">Email</label>
            <input id="email" name="email" type="email">
        </p>
        <p>
            <label for="agree">请同意我们的条款</label>
            <input type="checkbox" class="checkbox" id="agree" name="agree">
        </p>
        <p>
            <label for="newsletter">我希望收到简讯</label>
            <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
        </p>
        <fieldset id="newsletter_topics" class="ui-widget-content ui-corner-all">
            <legend class="ui-widget-header ui-corner-all">主题（至少选择两个）- 注：当未选择简讯时隐藏该项，但此处为了演示所以可见</legend>
            <label for="topic_marketflash">
                <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">
                Marketflash
            </label>
            <label for="topic_fuzz">
                <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">
                Latest fuzz
            </label>
            <label for="topic_digester">
                <input type="checkbox" id="topic_digester" value="digester" name="topic">
                Mailing list digeste
            </label>
            <label for="topic" class="error">请选择至少两个您感兴趣的主题。</label>
        </fieldset>
        <p>
            <button class="submit" type="submit">提交</button>
        </p>
    </fieldset>
</form>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
        alert("submitted!");
    },
    showErrors: function(map, list) {
        // there's probably a way to simplify this
        var focussed = document.activeElement;
        if (focussed && $(focussed).is("input, textarea")) {
            $(this.currentForm).tooltip("close", {
                currentTarget: focussed
            }, true)
        }
        this.currentElements.removeAttr("title").removeClass("ui-state-highlight");
        $.each(list, function(index, error) {
            $(error.element).attr("title", error.message).addClass("ui-state-highlight");
        });
        if (focussed && $(focussed).is("input, textarea")) {
            $(this.currentForm).tooltip("open", {
                target: focussed
            });
        }
    }
});

(function() {
    // use custom tooltip; disable animations for now to work around lack of refresh method on tooltip
    $("#commentForm, #signupForm").tooltip({
        show: false,
        hide: false
    });

    // validate the comment form when it is submitted
    $("#commentForm").validate();

    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            firstname: "请输入您的名字",
            lastname: "请输入您的姓氏",
            username: {
                required: "请输入一个用户名",
                minlength: "您的用户名必须包含至少 2 个字符"
            },
            password: {
                required: "请提供一个密码",
                minlength: "您的密码必须包含至少 5 个字符" 
            },
            confirm_password: {
                required: "请提供一个密码",
                minlength: "您的密码必须包含至少 5 个字符",
                equalTo: "请输入与上面相同的密码"
            },
            email: "请输入一个有效的电子邮件地址",
            agree: "请接受我们的条款"
        }
    });

    // propose username by combining first- and lastname
    $("#username").focus(function() {
        var firstname = $("#firstname").val();
        var lastname = $("#lastname").val();
        if (firstname && lastname && !this.value) {
            this.value = firstname + "." + lastname;
        }
    });

    //code to hide topic selection, disable for demo
    var newsletter = $("#newsletter");
    // newsletter topics are optional, hide at first
    var inital = newsletter.is(":checked");
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
    var topicInputs = topics.find("input").attr("disabled", !inital);
    // show when newsletter is checked
    newsletter.click(function() {
        topics[this.checked ? "removeClass" : "addClass"]("gray");
        topicInputs.attr("disabled", !this.checked);
    });

    $("#signupForm input:not(:submit)").addClass("ui-widget-content");

    $(":submit").button();
})();
</script>
</body>
</html>

TinyMCE - 一个轻量级的基于浏览器的所见即所得编辑器

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery 插件: 使用 TinyMCE 进行交互</title>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/demo/tinymce/tiny_mce.js"></script>
    <script>
    tinyMCE.init({
        mode: "textareas",
        theme: "simple",
        // 当改变时更新验证状态
        onchange_callback: function(editor) {
            tinyMCE.triggerSave();
            $("#" + editor.id).valid();
        }
    });
    $(function() {
        var validator = $("#myform").submit(function() {
            // 在提交验证之前更新相关的文本框
            tinyMCE.triggerSave();
        }).validate({
            ignore: "",
            rules: {
                title: "required",
                content: "required"
            },
            errorPlacement: function(label, element) {
                // 在生成文本框之后定位错误标签
                if (element.is("textarea")) {
                    label.insertAfter(element.next());
                } else {
                    label.insertAfter(element)
                }
            }
        });
        validator.focusInvalid = function() {
            // 当提交验证时放置焦点在 tinymce 上
            if (this.settings.focusInvalid) {
                try {
                    var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
                    if (toFocus.is("textarea")) {
                        tinyMCE.get(toFocus.attr("id")).focus();
                    } else {
                        toFocus.filter(":visible").focus();
                    }
                } catch (e) {
                    // 当聚焦在隐藏的元素上时忽略 IE 抛出的错误
                }
            }
        }
    })
    </script>
    <!-- /TinyMCE -->
</head>
<body>
<form id="myform" action="">
    <h3>TinyMCE 和 Validate 插件交互实例</h3>
    <label>字段</label>
    <input name="title">
    <br>
    <label>文本</label>
    <textarea id="content" name="content" rows="15" cols="80" style="width: 80%"></textarea>
    <br>
    <input type="submit" name="save" value="提交">
</form>
</body>
</html>

文件输入框

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Validate 插件 - 文件输入框</title>

<link rel="stylesheet" media="screen" href="//static.runoob.com/assets/jquery-validation-1.14.0/demo/css/screen.css">
<link rel="stylesheet" href="https://static.runoob.com/assets/jquery-validation-1.14.0/demo/css/cmxform.css" />
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/additional-methods.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#fileForm").validate();
});
</script>

</head>
<body>

<form class="cmxform" id="fileForm" method="post" action="">
    <fieldset>
        <legend>选择指定类型的文件？</legend>
        <p>
            <label for="file1">选择一个纯文本文件（例如 *.txt）</label>
            <input type="file" id="file1" name="file1" class="required" accept="text/plain" />
        </p>
        <p>
            <label for="file2">选择任何图像文件</label>
            <input type="file" id="file2" name="file2" class="required" accept="image/*"/>
        </p>
        <p>
            <label for="file3">选择一个 PDF 或 EPS 文件</label>
            <input type="file" id="file3" name="file3" class="required" accept="image/x-eps,application/pdf"/>
        </p>
        <p>
            <label for="file4">选择任何音频或图像文件</label>
            <input type="file" id="file4" name="file4" class="required" accept="image/*,audio/*"/>
        </p>
        <p>
            <label for="file5">选择一个或多个纯文本文件（例如 *.txt）</label>
            <input type="file" id="file5" name="file5" class="required" multiple accept="text/plain" />
        </p>
        <p>
            <input class="submit" type="submit" value="提交"/>
        </p>
    </fieldset>
</form>

</body>
</html>

jQuery Mobile 表单验证

<!DOCTYPE html>
<html>
    <head>
<!DOCTYPE html>
<html>
    <head>
    <title>jQuery Validate 插件 -  jQuery Mobile 表单验证</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <style>
        label.error {
                color: red;
                font-size: 16px;
                font-weight: normal;
                line-height: 1.4;
                margin-top: 0.5em;
                width: 100%;
                float: none;
        }

        @media screen and (orientation: portrait){
                label.error { margin-left: 0; display: block; }
        }

        @media screen and (orientation: landscape){
                label.error { display: inline-block; margin-left: 22%; }
        }

        em { color: red; font-weight: bold; padding-right: .25em; }
    </style>
</head>
<body>

    <div id="page1" data-role="page">

        <div data-role="header">
            <h1>欢迎</h1>
        </div>

        <div data-role="content">
            <form method="GET">
                <div data-role="fieldcontain">
                    <label for="email">Email：</label>
                    <input type="email" name="email" id="email" />
                </div>
                <div data-role="fieldcontain">
                    <label for="password">密码：</label>
                    <input type="password" name="password" id="password" />
                </div>
                <input data-role="submit" type="submit" value="登录" />
            </form>
        </div>

    </div>

    <script>
        $('#page1').bind('pageinit', function(event) {
            $('form').validate({
                rules: {
                    email: {
                        required: true
                    },
                    password: {
                        required: true
                    }
                }
            });
        });
    </script>
</body>
</html>

现实世界的实例

Milk 注册表单

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Remember The Milk signup form - jQuery Validate plugin demo - with friendly permission from the RTM team</title>
    <link rel="stylesheet" href="https://static.runoob.com/assets/jquery-validation-1.14.0/demo/milk/milk.css">
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.mockjax.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

    <script>
    $(document).ready(function() {
        $.mockjax({
            url: "emails.action",
            response: function(settings) {
                var email = settings.data.email,
                    emails = ["glen@marketo.com", "george@bush.gov", "me@god.com", "aboutface@cooper.com", "steam@valve.com", "bill@gates.com"];
                this.responseText = "true";
                if ($.inArray(email, emails) !== -1) {
                    this.responseText = "false";
                }
            },
            responseTime: 500
        });

        $.mockjax({
            url: "users.action",
            response: function(settings) {
                var user = settings.data.username,
                    users = ["asdf", "Peter", "Peter2", "George"];
                this.responseText = "true";
                if ($.inArray(user, users) !== -1) {
                    this.responseText = "false";
                }
            },
            responseTime: 500
        });

        // validate signup form on keyup and submit
        var validator = $("#signupform").validate({
            rules: {
                firstname: "required",
                lastname: "required",
                username: {
                    required: true,
                    minlength: 2,
                    remote: "users.action"
                },
                password: {
                    required: true,
                    minlength: 5
                },
                password_confirm: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true,
                    remote: "emails.action"
                },
                dateformat: "required",
                terms: "required"
            },
            messages: {
                firstname: "Enter your firstname",
                lastname: "Enter your lastname",
                username: {
                    required: "Enter a username",
                    minlength: jQuery.validator.format("Enter at least {0} characters"),
                    remote: jQuery.validator.format("{0} is already in use")
                },
                password: {
                    required: "Provide a password",
                    minlength: jQuery.validator.format("Enter at least {0} characters")
                },
                password_confirm: {
                    required: "Repeat your password",
                    minlength: jQuery.validator.format("Enter at least {0} characters"),
                    equalTo: "Enter the same password as above"
                },
                email: {
                    required: "Please enter a valid email address",
                    minlength: "Please enter a valid email address",
                    remote: jQuery.validator.format("{0} is already in use")
                },
                dateformat: "Choose your preferred dateformat",
                terms: " "
            },
            // the errorPlacement has to take the table layout into account
            errorPlacement: function(error, element) {
                if (element.is(":radio"))
                    error.appendTo(element.parent().next().next());
                else if (element.is(":checkbox"))
                    error.appendTo(element.next());
                else
                    error.appendTo(element.parent().next());
            },
            // specifying a submitHandler prevents the default submit, good for the demo
            submitHandler: function() {
                alert("submitted!");
            },
            // set this class to error-labels to indicate valid fields
            success: function(label) {
                // set &nbsp; as text for IE
                label.html("&nbsp;").addClass("checked");
            },
            highlight: function(element, errorClass) {
                $(element).parent().next().find("." + errorClass).removeClass("checked");
            }
        });

        // propose username by combining first- and lastname
        $("#username").focus(function() {
            var firstname = $("#firstname").val();
            var lastname = $("#lastname").val();
            if (firstname && lastname && !this.value) {
                this.value = (firstname + "." + lastname).toLowerCase();
            }
        });
    });
    </script>
</head>
<body>
<h1 id="banner"><a href="//jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
<div id="main">
    <div id="content">
        <div id="header">
            <div id="headerlogo">
                <img src="/try/jquery/plugins/images/milk.png" alt="Remember The Milk">
            </div>
        </div>
        <div style="clear: both;">
            <div></div>
        </div>
        <div class="content">
            <div id="signupbox">
                <div id="signuptab">
                    <ul>
                        <li id="signupcurrent"><a href=" ">Signup</a>
                        </li>
                    </ul>
                </div>
                <div id="signupwrap">
                    <form id="signupform" autocomplete="off" method="get" action="">
                        <table>
                            <tr>
                                <td class="label">
                                    <label id="lfirstname" for="firstname">First Name</label>
                                </td>
                                <td class="field">
                                    <input id="firstname" name="firstname" type="text" value="" maxlength="100">
                                </td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <label id="llastname" for="lastname">Last Name</label>
                                </td>
                                <td class="field">
                                    <input id="lastname" name="lastname" type="text" value="" maxlength="100">
                                </td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <label id="lusername" for="username">Username</label>
                                </td>
                                <td class="field">
                                    <input id="username" name="username" type="text" value="" maxlength="50">
                                </td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <label id="lpassword" for="password">Password</label>
                                </td>
                                <td class="field">
                                    <input id="password" name="password" type="password" maxlength="50" value="">
                                </td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <label id="lpassword_confirm" for="password_confirm">Confirm Password</label>
                                </td>
                                <td class="field">
                                    <input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="">
                                </td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <label id="lemail" for="email">Email Address</label>
                                </td>
                                <td class="field">
                                    <input id="email" name="email" type="text" value="" maxlength="150">
                                </td>
                                <td class="status"></td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <label>Which Looks Right</label>
                                </td>
                                <td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td style="padding-right: 5px;">
                                                    <input id="dateformat_eu" name="dateformat" type="radio" value="0">
                                                    <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
                                                </td>
                                                <td style="padding-left: 5px;">
                                                    <input id="dateformat_am" name="dateformat" type="radio" value="1">
                                                    <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td class="label">&nbsp;</td>
                                <td class="field" colspan="2">
                                    <div id="termswrap">
                                        <input id="terms" type="checkbox" name="terms">
                                        <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
                                    </div>
                                    <!-- /termswrap -->
                                </td>
                            </tr>
                            <tr>
                                <td class="label">
                                    <label id="lsignupsubmit" for="signupsubmit">Signup</label>
                                </td>
                                <td class="field" colspan="2">
                                    <input id="signupsubmit" name="signup" type="submit" value="Signup">
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Marketo 注册表单

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Validate 插件 -  Marketo 注册表单</title>

<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.mockjax.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/demo/marketo/jquery.maskedinput.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/jquery-validation/demo/marketo/mktSignup.js"></script>

<link rel="stylesheet" href="https://static.runoob.com/assets/jquery-validation-1.14.0/demo/marketo/stylesheet.css" />
</head>
<body>
<!-- start page wrapper --><div id="letterbox">

<!-- start header container -->
<div id="header-background">
  <div class="nav-global-container">
    <div class="login"><a href="#"><span></span>客户登录</a></div>
    <div class="logo"><a href="#"><img src="/try/jquery/plugins/images/logo_marketo.gif" width="168" height="73"  alt="Marketo" /></a></div>
        <div class="nav-global">
            <ul>
            <li><a href="#" class="nav-g01"><span></span>首页</a></li>
              <li><a href="#" class="nav-g02"><span></span>产品</a></li>
              <li><a href="#" class="nav-g04"><span></span>B2B 市场资源</a></li>
              <li><a href="#" class="nav-g05"><span></span>关于 Marketo</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- end header container -->
<div class="line-grey-tier"></div>

<!-- start page container 2 div-->
<div id="page-container" class="resize"><div id="page-content-inner" class="resize">

<!-- start col-main -->

<div id="col-main" class="resize" style="">



  <!-- start main content  -->
  <div class="main-content resize">

  <div class="action-container" style="display:none;"></div>


<h1>第 1 步（共 2 步）</h1>
<p>
</p>
<br clear="all" />
<div>
  <form id="profileForm" type="actionForm" action="step2.htm" method="get" >


    <div class="error" style="display:none;">
      <img src="/try/jquery/plugins/images/warning.gif" alt="Warning!" width="24" height="24" style="float:left; margin: -5px 10px 0px 0px; " />

      <span></span>.<br clear="all"/>
    </div>


    <table cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td class="label"><label for="co_name">公司名称：</label></td>
        <td class="field">
          <input id="co_name" class="required" maxlength="40" name="co_name" size="20" type="text" tabindex="1" value="" />
        </td>
      </tr>
      <tr>
        <td class="label"><label for="co_url">公司 URL：</label></td>
        <td class="field">
          <input id="co_url" class="required defaultInvalid url" maxlength="40" name="co_url" style="width:163px" type="text" tabindex="2" value="http://" />
        </td>
      </tr>
      <tr>
        <td/><td/>
      </tr>
      <tr>
        <td class="label"><label for="first_name">名字：</label></td>
        <td class="field">
          <input id="first_name" class="required" maxlength="40" name="first_name" size="20" type="text" tabindex="3" value="" />
        </td>
      </tr>
      <tr>
        <td class="label"><label for="last_name">姓氏：</label></td>
        <td class="field">
          <input id="last_name" class="required" maxlength="40" name="last_name" size="20" type="text" tabindex="4" value="" />
        </td>
      </tr>
      <tr>
        <td class="label"><label for="address1">公司地址：</label></td>
        <td class="field">
          <input  maxlength="40" class="required" name="address1" size="20" type="text" tabindex="5" value="" />
        </td>
      </tr>
      <tr>
        <td class="label"></td>
        <td class="field">
          <input  maxlength="40" name="address2" size="20" type="text" tabindex="6" value="" />
        </td>
      </tr>
      <tr>
        <td class="label"><label for="city">城市：</label></td>
        <td class="field">
          <input  maxlength="40" class="required" name="city" size="20" type="text" tabindex="7" value="" />
        </td>
      </tr>
      <tr>
        <td class="label"><label for="state">州：</label></td>
        <td class="field">
          <select id="state" class="required" name="state" style="margin-left: 4px;" tabindex="8">
            <option value="">请选择州：</option>
            <option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option>
          </select>
        </td>
      </tr>

      <tr>
        <td class="label"><label for="zip">邮编：</label></td>
        <td class="field">
          <input  maxlength="10" name="zip" style="width: 100px" type="text" class="required zipcode" tabindex="9" value="" />
        </td>
      </tr>
      <tr>
        <td class="label"><label for="phone">电话：</label></td>
        <td class="field">
          <input id="phone" maxlength="14" name="phone" type="text" class="required phone" tabindex="10" value="" />
        </td>
      </tr>



      <tr>
        <td colspan="2">
          <h2 style="border-bottom: 1px solid #CCCCCC;">登录信息</h2>
        </td>
      </tr>


      <tr>
        <td class="label"><label for="email">Email：</label></td>
        <td class="field">
          <input id="email" class="required email" remote="emails.action" maxlength="40" name="email" size="20" type="text" tabindex="11" value="" />
        </td>
      </tr>

      <tr>
        <td class="label"><label for="password1">密码：</label></td>
        <td class="field">
            <input id="password1" class="required password" maxlength="40" name="password1" size="20" type="password" tabindex="12" value="" />
        </td>
      </tr>
      <tr>
        <td class="label"><label for="password2">重复输入密码：</label></td>
        <td class="field">
          <input id="password2" class="required" equalTo="#password1" maxlength="40" name="password2"  size="20" type="password" tabindex="13" value="" />
          <div class="formError"></div>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <div class="buttonSubmit">
            <span></span>
            <input class="formButton" type="submit" value="下一步" style="width: 140px" tabindex="14" />
          </div>

        </td>
      </tr>
    </table><br /><br />
  </form>
  <br clear="all"/>


</div>



    </div>    <!-- end main content  -->
    <br />
</div> <!-- end col-main -->

<!-- start left col -->
<div id="col-left" class="nav-left-back empty resize" style="position: absolute; min-height: 450px;">
  <div class="col-left-header-tab" style="position: absolute;">注册</div>
  <div class="nav-left">

  </div>


      <div class="left-nav-callout png" style="top: 15px; margin-bottom: 100px;">
        <img src="/try/jquery/plugins/images/left-nav-callout-long.png"  class="png" alt="" />
        <h6>注册过程</h6>
        <a style="background-image: url(/try/jquery/plugins/images/step1-24.gif); font-weight: normal; text-decoration: none; cursor: default;">使用一个有效的信用卡进行注册。</a>
        <a style="background-image: url(/try/jquery/plugins/images/step2-24.gif); font-weight: normal; text-decoration: none; cursor: default;">连接到您的谷歌 AdWords 账号。您需要有一个 AdWords 客户 ID。</a>
        <a style="background-image: url(/try/jquery/plugins/images/step3-24.gif); font-weight: normal; text-decoration: none; cursor: default;">开始 30 天的试用。试用期结束之前都不需要付款。</a>
      </div>

<div class="footerAddress">
<b>Marketo Inc.</b><br />
1710 S. Amphlett Blvd.<br />
San Mateo, CA 94402 USA<br />
</div>
<br clear="all"/>
</div>    <!-- end left col -->

</div>  </div>  <!-- end page container 2 divs-->

  <div id="footer-container" align="center">
   <div class="footer">
    <ul>
    <li><a href="#">首页</a></li>
    <li class="line-off"><a href="jquery-plugin-marketo-step2.htm">第 2 步</a></li>
    </ul>
    </div></div>



<!-- end page wrapper -->
</div>

    </body>
</html>

房屋买卖折叠面板表单

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Validate 插件 - 折叠面板表单验证</title>

<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/demo/marketo/jquery.maskedinput.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $("#recordClientPhone").mask("(999) 999-9999");
    $("#recordClientPhoneAlt").mask("(999) 999-9999");
    $("#recordClientZip").mask("99999");
    $("#recordPropertyZip").mask("99999");
    $("#recordPurchaseZip").mask("99999");

    // 添加 * 到必填字段的标签
    $('label.required').append('&nbsp;<strong>*</strong>&nbsp;');

    // 折叠面板功能
    var accordion = $("#stepForm").accordion();
    var current = 0;

    $.validator.addMethod("pageRequired", function(value, element) {
        var $element = $(element)
        function match(index) {
            return current == index && $(element).parents("#sf" + (index + 1)).length;
        }
        if (match(0) || match(1) || match(2)) {
            return !this.optional(element);
        }
        return "dependency-mismatch";
    }, $.validator.messages.required)

    var v = $("#cmaForm").validate({
        errorClass: "warning",
        onkeyup: false,
        onblur: false,
        submitHandler: function() {
            alert("Submitted, thanks!");
        }
    });

    // 返回按钮不需要运行验证
    $("#sf2 .prevbutton").click(function(){
        accordion.accordion("option", "active", 0);
        current = 0;
    });
    $("#sf3 .prevbutton").click(function(){
        accordion.accordion("option", "active", 1);
        current = 1;
    });
    // 所有通过上面指定的目标重载的按钮都要运行验证
    $(".open2").click(function() {
      if (v.form()) {
        accordion.accordion("option", "active", 2);
        current = 2;
      }
    });
    $(".open1").click(function() {
      if (v.form()) {
        accordion.accordion("option", "active", 1);
        current = 1;
      }
    });
    $(".open0").click(function() {
      if (v.form()) {
        accordion.accordion("option", "active", 0);
        current = 0;
      }
    });

});
</script>
<style type="text/css">
.warning{
    color:red;
}

</style>
<link rel="stylesheet" type="text/css" media="screen" href="//static.runoob.com/assets/jquery-validation-1.14.0/demo/multipart/style.css" />
</head>
<body>

<div id="wrap">
<div id="main">

<h1 class="top bottom"><span>帮我</span>买卖房屋</h1>
<h2>该表单只需要 3 步即可快速完成！</h2>
<form name="cmaForm" id="cmaForm" method="post">
<input type="hidden" name="recordRequestPrimaryServiceID" id="recordRequestPrimaryServiceID" value="100" />
<input type="hidden" name="recordClientServices" id="recordClientServices" value="1,3" />
<ul id="stepForm" class="ui-accordion-container">
    <li id="sf1"><a href='#' class="ui-accordion-link"> </a>
    <div>
    <fieldset><legend>第 1 步（共 3 步）</legend>
    <div class="requiredNotice">*必填字段</div>
    <h3 class="stepHeader">告诉我们您想要购买的房屋的一些特征</h3>
    <label for="recordPurchaseMetRealtor" class="input required">您目前是一个房地产经纪人吗？</label> &nbsp;&nbsp;否： <input name="recordPurchaseMetRealtor" type="radio" checked="checked" class="inputclass" value="0" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是： <input name="recordPurchaseMetRealtor" type="radio" class="inputclass pageRequired" value="1" title="请选择是或否" />
    <div class="formspacer"></div>
    <label for="recordPurchaseTimeFrameID" class="input required">您打算何时搬迁？</label> <select name="recordPurchaseTimeFrameID" id="recordPurchaseTimeFrameID" class="inputclass pageRequired" title="请选择一个时间段">
        <option value="">-请选择-</option>
        <option value="1">少于 3 个月</option>
        <option value="2">3-6 个月</option>
        <option value="3">6-9 个月</option>
        <option value="4">9-12 个月</option>
        <option value="5">多于 12 个月</option>
    </select> <br />
    <label for="recordPurchasePriceRangeID" class="input required">购买价格范围：</label> <select name="recordPurchasePriceRangeID" id="recordPurchasePriceRangeID" class="inputclass pageRequired" title="请选择一个价格范围">
        <option value="">-请选择-</option>
        <option value="1"></option>
        <option value="2">$75,000 - $100,000</option>
        <option value="3">$100,000 - $125,000</option>
        <option value="4">$125,000 - $150,000</option>
        <option value="5">$150,000 - $200,000</option>
        <option value="6">$200,000 - $250,000</option>
        <option value="7">$250,000 - $300,000</option>
        <option value="8">$300,000 - $350,000</option>
        <option value="9">$350,000 - $400,000</option>
        <option value="10">$400,000 - $500,000</option>
        <option value="11">$500,000 - $700,000</option>
        <option value="12">$700,000 - $900,000</option>
        <option value="13">> $900,000</option>
    </select> <br />
    <label for="recordPurchaseState" class="input required">州：</label> <select name="recordPurchaseState" id="recordPurchaseState" class="inputclass pageRequired" title="请选择一个州">
        <option value="">-请选择-</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">Dist of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA" selected="selected">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select> <br />

    <label for="recordPurchasePropertyTypeID" class="input">所需的房屋类型：</label> <select name="recordPurchasePropertyTypeID" id="recordPurchasePropertyTypeID" class="inputclass" title="请选择一个类型">
        <option value="">-请选择-</option>
        <option value="1">单户型</option>
        <option value="2">公寓</option>
        <option value="3">联排别墅</option>
        <option value="4">出租房</option>
        <option value="5">多户型</option>
        <option value="6">度假屋</option>
        <option value="7">其他</option>
    </select> <br />
    <div class="buttonWrapper"><input name="formNext1" type="button" class="open1 nextbutton" value="下一步" alt="下一步" title="下一步" /></div>
    </fieldset>
    </div>
    </li>
    <li id="sf2">
    <a href='#' class="ui-accordion-link">
    </a>
    <div>
    <fieldset><legend>第 2 步（共 3 步）</legend>
    <div class="requiredNotice">*必填字段</div>
    <h3 class="stepHeader">告诉我们您想要出售的房屋的一些特征</h3>
    <label for="recordClientTimeFrameID" class="input required">您打算何时出售？</label> <select name="recordClientTimeFrameID" id="recordClientTimeFrameID" class="inputclass pageRequired" title="请选择一个时间段">
        <option value="">-请选择-</option>
        <option value="1">少于 3 个月</option>
        <option value="2">3-6 个月</option>
        <option value="3">6-9 个月</option>
        <option value="4">9-12 个月</option>
        <option value="5">多于 12 个月</option>
    </select> <br />
    <label for="recordClientHomeTypeID" class="input required">所卖的房屋类型：</label> <select name="recordClientHomeTypeID" id="recordClientHomeTypeID" class="inputclass pageRequired" title="请选择一个类型">
        <option value="">-请选择-</option>
        <option value="1">单户型</option>
        <option value="2">公寓</option>
        <option value="3">联排别墅</option>
        <option value="4">出租房</option>
        <option value="5">多户型</option>
        <option value="6">度假屋</option>
        <option value="7">其他</option>
    </select> <br />
    <label for="recordPropertyAddress1" class="input required">物业地址：</label> <input name="recordPropertyAddress1" id="recordPropertyAddress1" class="inputclass pageRequired" title="物业地址是必填的" maxlength="254" onblur="recordClientAddress1.value = this.value" /><br />
    <label for="recordPropertyAddress2" class="input">地址（2）：</label> <input name="recordPropertyAddress2" id="recordPropertyAddress2" class="inputclass" maxlength="254" onblur="recordClientAddress2.value = this.value" /><br />
    <label for="recordPropertyCity" class="input required">城市：</label> <input name="recordPropertyCity" id="recordPropertyCity" class="inputclass pageRequired" title="城市是必填的" maxlength="254" onblur="recordClientCity.value = this.value" /><br />
    <label for="recordPropertyState" class="input required">州：</label> <select name="recordPropertyState" id="recordPropertyState" class="inputclass pageRequired" title="请选择一个州" onchange="recordClientState.value = this.value">
        <option value="">-请选择-</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">Dist of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA" selected="selected">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select> <br />
    <label for="recordPropertyZip" class="input required">邮编：</label> <input name="recordPropertyZip" id="recordPropertyZip" class="inputclass pageRequired" title="Zip Code is required" maxlength="254" onblur="recordClientZip.value = this.value" /><br />

    <label for="recordClientPropertyValueID" class="input required">估计市场价值：</label> <select name="recordClientPropertyValueID" id="recordClientPropertyValueID" class="inputclass pageRequired" title="请选择一个价格范围">
        <option value="">-请选择-</option>
        <option value="1">少于 $75K</option>
        <option value="2">$75-$100K</option>
        <option value="3">$100-$125K</option>
        <option value="4">$125-$150K</option>
        <option value="5">$150-$200K</option>
        <option value="6">$200-$250K</option>
        <option value="7">$250-$300K</option>
        <option value="8">$300-$350K</option>
        <option value="9">$350-$400K</option>
        <option value="10">$400-$500K</option>
        <option value="11">$500-$700K</option>
        <option value="12">$700-$900K</option>
        <option value="13">多于 $900K</option>
    </select> <br />
    <label for="recordPropertyBedroomsID" class="input">卧室：</label> <select name="recordPropertyBedroomsID" id="recordPropertyBedroomsID" class="inputclass">
        <option value="">-请选择-</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5+</option>
    </select> <br />
    <label for="recordPropertyBathroomsId" class="input">浴室：</label> <select name="recordPropertyBathroomsId" id="recordPropertyBathroomsId" class="inputclass">
        <option value="">-请选择-</option>
        <option value="1">1</option>
        <option value="2">1.5</option>
        <option value="3">2</option>
        <option value="4">2.5</option>
        <option value="5">3</option>
        <option value="6">3.5</option>
        <option value="7">4+</option>
    </select> <br />
    <label for="recordPropertyAgeId" class="input">房屋的大约年龄：</label> <select name="recordPropertyAgeId" id="recordPropertyAgeId" class="inputclass">
        <option value="">-请选择-</option>
        <option value="1">少于 1 年</option>
        <option value="2">1-5 年</option>
        <option value="3">6-10 年</option>
        <option value="4">11-15 年</option>
        <option value="5">多于 15 年</option>
    </select> <br />
    <label for="recordPropertySqFt" class="input">大约平方英尺：</label> <input name="recordPropertySqFt" id="recordPropertySqFt" class="inputclass" maxlength="254" /><br />
    <div class="buttonWrapper"><input name="formBack0" type="button" class="open0 prevbutton" value="返回" alt="返回" title="返回" /> <input name="formNext2" type="button" class="open2 nextbutton" value="下一步" alt="下一步" title="下一步" /></div>
    </fieldset>
    </div>
    </li>
    <li id="sf3">
    <a href='#' class="ui-accordion-link">
    </a>
    <div>
    <fieldset><legend>第 3 步（共 3 步）</legend>
    <div class="requiredNotice">*必填字段</div>
    <h3 class="stepHeader">告诉我们有关您的信息</h3>
    <label for="recordClientNameFirst" class="input required">名字：</label> <input name="recordClientNameFirst" id="recordClientNameFirst" class="inputclass pageRequired" title="名字是必填的" maxlength="254" /> <br />
    <label for="recordClientNameLast" class="input required">姓氏：</label> <input name="recordClientNameLast" id="recordClientNameLast" class="inputclass pageRequired" maxlength="254" title="姓氏是必填的" /> <br />
    <label for="recordClientAddress1" class="input required">目前地址：</label> <input name="recordClientAddress1" id="recordClientAddress1" class="inputclass pageRequired" maxlength="254" title="地址是必填的" /> <br />
    <label for="recordClientAddress2" class="input">地址（2）：</label> <input name="recordClientAddress2" id="recordClientAddress2" class="inputclass" maxlength="254" /> <br />
    <label for="recordClientCity" class="input required">城市：</label> <input name="recordClientCity" id="recordClientCity" class="inputclass pageRequired" maxlength="254" title="城市是必填的" /> <br />
    <label for="recordClientState" class="input required">州：</label> <select name="recordClientState" id="recordClientState" class="inputclass pageRequired" title="请选择一个州">
        <option value="">-请选择-</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">Dist of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA" selected="selected">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select> <br />
    <label for="recordClientZip" class="input required">邮编：</label> <input name="recordClientZip" id="recordClientZip" class="inputclass pageRequired" maxlength="12" title="邮政编码是必填的" /> <br />
    <label for="recordClientPhone" class="input required">电话号码：</label> <input name="recordClientPhone" id="recordClientPhone" class="inputclass pageRequired" maxlength="254" title="电话号码是必填的" /> <br />
    <label for="recordClientPhoneAlt" class="input">备用号码：</label> <input name="recordClientPhoneAlt" id="recordClientPhoneAlt" class="inputclass" maxlength="254" /> <br />
    <label for="recordClientEmail" class="input required">Email 地址：</label> <input name="recordClientEmail" id="recordClientEmail" class="inputclass pageRequired email" maxlength="254" title="Email 地址是必填的" /> <br />
    <label for="recordClientEmail1" class="input required">确认 Email：</label> <input name="recordClientEmail1" id="recordClientEmail1" class="inputclass pageRequired" equalTo:"'#recordClientEmail" maxlength="254" title="请确认您的 email 地址" /> <br />
    <br />
    <p class="formDisclaimer">这是一个示例表单，信息不会被发送到任何地方。</p>
    <div class="buttonWrapper"><input name="formBack1" type="button" class="open1 prevbutton" value="返回" alt="返回" title="返回" /> <input name="submit" type="submit" id="submit" value="提交" class="submitbutton" alt="提交" title="提交"></div>
    </fieldset>
    </div>
    </li>
</ul>
</form>

</div>
</div>

</body>
</html>

远程 CAPTCHA（验证码）验证

<!DOCTYPE>
<html>

<head>
 <title>jQuery Validate 插件 - AJAX CAPTCHA（验证码）</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="AJAX，JHR，PHP，CAPTCHA（验证码），下载，PHP CAPTCHA（验证码），AJAX CAPTCHA（验证码），AJAX PHP CAPTCHA（验证码），下载 AJAX CAPTCHA（验证码），下载 AJAX PHP CAPTCHA（验证码）" />
<meta name="description" content="一个 AJAX CAPTCHA（验证码）脚本，使用 PHP 编写的" />

<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script type="text/javascript" src="//static.runoob.com/assets/jquery-validation-1.14.0/demo/captcha/captcha.js"></script>

<link rel="stylesheet" type="text/css" href="//static.runoob.com/assets/jquery-validation-1.14.0/demo/captcha/style.css" />
  <style type="text/css">
    img { border: 1px solid #eee; }
      p#statusgreen { font-size: 1.2em; background-color: #fff; color: #0a0; }
        p#statusred { font-size: 1.2em; background-color: #fff; color: #a00; }
          fieldset label { display: block; }
            fieldset div#captchaimage { float: left; margin-right: 15px; }
              fieldset input#captcha { width: 25%; border: 1px solid #ddd; padding: 2px; }
                fieldset input#submit { display: block; margin: 2% 0% 0% 0%; }
                  #captcha.success {
                        border: 1px solid #49c24f;
                            background: #bcffbf;
                              }
                                #captcha.error {
                                      border: 1px solid #c24949;
                                          background: #ffbcbc;
                                            }
                                             </style>
                                             </head>

<body>

<h1><acronym title="异步 JavaScript 和 XML">AJAX</acronym> <acronym title="用于区分计算机和人类的完全自动化的公共图灵测试">CAPTCHA（验证码）</acronym>，基于 <a href="//psyrens.com/captcha/">http://psyrens.com/captcha/</a></h1>

<form id="captchaform" action="">
<fieldset>
 <div id="captchaimage"><a href="static/jquery-validation/demo/captcha/index.php" id="refreshimg" title="点击刷新图像"><img src="static/jquery-validation/demo/captcha/images/image.php?1395847946" width="132" height="46" alt="验证码图像" /></a></div>
  <label for="captcha">请输入上面图片的字符（不区分大小写）：</label>
   <input type="text" maxlength="6" name="captcha" id="captcha" />
    <input type="submit" name="submit" id="submit" value="检查" />
    </fieldset>
    </form>

<p>如果您不能辨认图像上的文本，请点击图像动态生成一个新的验证码。</p>

</body>

</html>

实例下载

点击下载

上一节: jQuery 属性下一节: jQuery Cookie

直播支持申请

职业发展学习路径

热门技术学习路径

搜索热词

目录

评价

推荐

1. jQuery 教程

jQuery 简介

jQuery 安装

jQuery 语法

jQuery 选择器

jQuery 事件

2. jQuery 效果

jQuery 隐藏/显示

jQuery 淡入淡出

jQuery 滑动

jQuery 动画

jQuery 停止动画

jQuery Callback

jQuery 链

3. jQuery HTML

jQuery 捕获

jQuery 设置

jQuery 添加元素

jQuery 删除元素

jQuery CSS 类

jQuery css() 方法

jQuery 尺寸

4. jQuery 遍历

jQuery 遍历

jQuery 祖先

jQuery 后代

jQuery 同胞

jQuery 过滤

5. jQuery Ajax

jQuery AJAX 简介

jQuery load() 方法

jQuery get()/post() 方法

6. jQuery 其他

jQuery noConflict() 方法

jQuery JSONP

7. jQuery 实例

jQuery 实例

8. jQuery 参考手册

jQuery 选择器

jQuery 事件方法

jQuery 效果方法

jQuery HTML / CSS 方法

jQuery 遍历方法

jQuery AJAX 方法

jQuery 杂项方法

jQuery 属性

9. jQuery 插件

jQuery Validate

jQuery Cookie

jQuery Accordion

jQuery Autocomplete

jQuery Growl

jQuery 密码验证

jQuery Prettydate

jQuery Tooltip

jQuery Treeview

菜鸟教程

课程评价 (0)

学员评价

相关云产品

云服务器

GPU 云服务器

FPGA 云服务器_FPGA 实例_硬件加速

相关课程推荐

本页目录

jQuery Validate

jQuery Validate

导入 js 库

默认校验规则

默认提示

使用方式

1、将校验规则写到控件中

2、将校验规则写到 js 代码中