在线编辑工具_程序员人生

源代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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=" ">注册</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>

运行结果：