在线HTML编辑器 - BootWiki.com

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>jQuery Password Validation（密码验证）插件 - 集成</title>

<link href="http://jquery.bassistance.de/validate.password/demo/milk.css" media="screen" rel="stylesheet" type="text/css" />
<link href="http://jquery.bassistance.de/validate.password/jquery.validate.password.css" media="screen" rel="stylesheet" type="text/css" />

<script src="http://jquery.bassistance.de/validate.password/lib/jquery.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/validate.password/lib/jquery.validate.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/validate.password/jquery.validate.password.js" type="text/javascript"></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 时，设置 &nbsp; 为文本
			label.html("&nbsp;").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=" ">注册</a></li>
        </ul>
      </div>
      <div id="signupwrap">
      		<form action="" autocomplete="off" id="signupform" method="get">
	  		  <table>
	  		  <tr>
	  			<td class="label"><label for="username" id="lusername">用户名</label></td>
	  			<td class="field"><input id="username" maxlength="50" name="username" type="text" value="" /></td>
	  			<td class="status"></td>
	  		  </tr>
	  		  <tr>
	  			<td class="label"><label for="password" id="lpassword">密码</label></td>
	  			<td class="field"><input id="password" maxlength="50" name="password" type="password" value="" /></td>
	  			<td class="status">
	  				<div class="password-meter">
	  					<div class="password-meter-message">&nbsp;</div>
	  					<div class="password-meter-bg">
		  					<div class="password-meter-bar"></div>
	  					</div>
	  				</div>
				</td>
	  		  </tr>
	  		  <tr>
	  			<td class="label"><label for="password_confirm" id="lpassword_confirm">确认密码</label></td>
	  			<td class="field"><input id="password_confirm" maxlength="50" name="password_confirm" type="password" value="" /></td>
	  			<td class="status"></td>
	  		  </tr>
	  		  <tr>
	  			<td class="label"><label for="signupsubmit" id="lsignupsubmit">注册</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>