<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="vendor/jquery-1.10.0.js"></script>

<script src="vendor/jquery.validate-1.13.1.js"></script>

<style>

div{margin-left: 10px;color: red}

label.error{



margin-left: 10px;



color: red;



}



</style>

</head>

<body>

<form id="demo">

<div>用户登录系统</div>

<p>

<label for="username">用户名</label>

<input type="text" id="username" name="username">

<!--<label for="username" class="error"></label>-->

</p>

<p>

<label for="password">密码</label>

<input type="password" id="password" name="password" >

<!--<label for="password" class="error"></label>-->

</p>

<p>

<label for="confirm-password">确认密码</label>

<input type="password" id= "confirm-password" name="confirm-password">

<!--<label for="confirm-password" class="error"></label>-->

</p>

<button type="submit" id="check">表单检查</button>

<input type="submit" value="登录">





</form>

<script>

$(function(){

$("#demo").validate(

{ //参数

rules:{

//参数1

username:{

required:true,

rangelength:[2,16],

remote:"remote.json"

},

//参数2

password:{

required:true,

minlength:8,

maxlength:16

},

"confirm-password":{

equalTo:"#password"

}



},

messages:{

username:{

required:"必须填写用户名",

rangelength:"长度应该在8位到16位之间"

},

password:{

required:"必须填写密码",

minlength:"长度不得小于8位",

maxlength:"长度不得大于16位"

},

"confirm-password": {

equalTo: "两次输入密码必须相同"

}



}



});



$("#check").click(function(){

alert($("#demo").valid() ? "填写正确":"填写错误")



});

});









</script>



</body>

</html>