<html>
<head>
<title>jQuery Password Validation（密码验证）插件 - 集成</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://jquery.bassistance.de/validate.password/demo/milk.css">
<link rel="stylesheet" type="text/css" media="screen" href="http://jquery.bassistance.de/validate.password/jquery.validate.password.css">
<script type="text/javascript" src="http://jquery.bassistance.de/validate.password/lib/jquery.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/validate.password/lib/jquery.validate.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/validate.password/jquery.validate.password.js"></script>
<script id="demo" type="text/javascript">
$(document).ready(function() {
// 当松开按键时验证注册表单并提交
var validator = $("#signupform").validate({
rules: {
username: {
required: true,
minlength: 2
},
password: {
password: "#username"
},
password_confirm: {
required: true,
equalTo: "#password"
}
},
messages: {
username: {
required: "请输入一个用户名",
minlength: jQuery.format("请输入至少 {0} 个字符")
},
password_confirm: {
required: "请重复输入您的密码",
minlength: jQuery.format("请输入至少 {0} 个字符"),
equalTo: "请输入与上面相同的密码"
}
},
// errorPlacement 必须考虑到表格布局
errorPlacement: function(error, element) {
error.prependTo( element.parent().next() );
},
// 指定一个 submitHandler，防止默认的提交，有利于演示
submitHandler: function() {
alert("submitted!");
},
// 设置该 class 为 error-labels 来表示有效的字段
success: function(label) {
// 当使用 IE 时，设置 为文本
label.html(" ").addClass("checked");
}
});
// 通过结合名字和姓氏来生成建议用户名
$("#username").focus(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
if(firstname && lastname && !this.value) {
this.value = firstname + "." + lastname;
}
});
});
</script>
</head>
<body>
<div id="main">
<div id="content">
<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="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">
<div class="password-meter">
<div class="password-meter-message"> </div>
<div class="password-meter-bg">
<div class="password-meter-bar"></div>
</div>
</div>
</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="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>