<html lang="en">
<head>
<title>jQuery Validate 插件 - Milk 注册表单</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/milk/milk.css">
<script src="http://jquery.bassistance.de/validate/lib/jquery.js"></script>
<script src="http://jquery.bassistance.de/validate/lib/jquery.mockjax.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.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 = "That's already taken.";
}
},
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
});
// 当松开按键时验证注册表单并提交
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: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入一个用户名",
minlength: jQuery.format("请输入至少 {0} 个字符"),
remote: jQuery.format("{0} 已被使用")
},
password: {
required: "请提供一个密码",
rangelength: jQuery.format("请输入至少 {0} 个字符")
},
password_confirm: {
required: "请重复输入您的密码",
minlength: jQuery.format("请输入至少 {0} 个字符"),
equalTo: "请输入与上面相同的密码"
},
email: {
required: "请输入一个有效的电子邮件地址",
minlength: "请输入一个有效的电子邮件地址",
remote: jQuery.format("{0} 已被使用")
},
dateformat: "请选择您喜欢的日期格式",
terms: " "
},
// errorPlacement 必须考虑到表格布局
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() );
},
// 指定一个 submitHandler，防止默认的提交，有利于演示
submitHandler: function() {
alert("submitted!");
},
// 设置该 class 为 error-labels 来表示有效的字段
success: function(label) {
// 当使用 IE 时，设置 为文本
label.html(" ").addClass("checked");
},
highlight: function(element, errorClass) {
$(element).parent().next().find("." + errorClass).removeClass("checked");
}
});
// 通过结合名字和姓氏来生成建议用户名
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = (firstname + "." + lastname).toLowerCase();
}
});
});
</script>
</head>
<body>
<div id="main">
<div id="content">
<div id="header">
<div id="headerlogo"><img src="/try/jquery/plugins/static/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="/demo/%20">注册</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">名字</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">姓氏</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">用户名</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">密码</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">确认密码</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 地址</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>日期格式</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"> </td>
<td class="field" colspan="2">
<div id="termswrap">
<input id="terms" type="checkbox" name="terms">
<label id="lterms" for="terms">我已经阅读并接受使用条款。</label>
</div>
</td>
</tr>
<tr>
<td class="label"><label id="lsignupsubmit" for="signupsubmit">注册</label></td>
<td class="field" colspan="2">
<input id="signupsubmit" name="signup" type="submit" value="注册">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>