<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head?lang="en">
????<meta?charset="UTF-8">
????<title></title>
????<style>
????????body{
????????????font-size:?36px;
????????????line-height:?1.6;
????????}
????????p{
????????????margin:?10px?0;
????????}
????????label{
????????????display:?inline-block;
????????????min-width:?140px;
????????}
????????label.error{
????????????margin-left:?10px;
????????????color:?red;
????????}
????????input,button{
????????????font-size:?36px;
????????????line-height:?35px;
????????????border:?1px?solid?#999;
????????????min-width:?180px;
????????}
????????input.error{
????????????border:?1px?solid?red;
????????}
????????input[type=submit],button{
????????????margin-top:?20px;
????????????font-size:?36px;
????????????padding:?10px?0;
????????}
????????fieldset{
????????????width:?720px;
????????????height:?360px;
????????????margin:?0?auto;
????????????padding:?0?auto;
????????}
????</style>
????<script?src="http://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
????<script??src="http://cdn.bootcss.com/jquery-validate/1.13.1/jquery.validate.js"?type="text/javascript"></script>
</head>
<body>
????<form?id="demoForm"?method="post">
????????<fieldset>
????????????<legend>用戶登錄</legend>
????????????<p>
????????????????<label?for="username">用戶名</label>
????????????????<input?type="text"?id="username"?name="username">
????????????</p>
????????????<p>
????????????????<label?for="password">密?碼</label>
????????????????<input?type="password"?id="password"?name="password">
????????????</p>
????????????<p>
????????????????<input?type="submit"?value="登錄">
????????????</p>
????????</fieldset>
????</form>
????????????<script?type="text/javascript">
????????????????$(document).ready(function(){
????????????????????$("#demoForm").validate({
????????????????????????rules:{
????????????????????????????username:{
????????????????????????????????required:true,
????????????????????????????????minelength:2,
????????????????????????????????maxlength:10
?},
????????????????????????????password:{
????????????????????????????????required:true,
????????????????????????????????minelength:2,
????????????????????????????????maxlength:16
?}
????????????????????????},
????????????????????????messages:{
????????????????????????????username:{
????????????????????????????????required:"用戶名必須填寫",
????????????????????????????????minlength:"用戶名最少為2字符",
????????????????????????????????maxlength:"用戶名最大為10字符"
?},
????????????????????????????password:{
????????????????????????????????required:"密碼必須填寫",
????????????????????????????????minlength:"密碼最少為2字符",
????????????????????????????????maxlength:"密碼最大為16字符"
?}
????????????????????????}
????????????????????});
????????????????});
????????????</script>
</body>
</html>
2016-08-27
已經(jīng)自己找到