<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>validate-demo</title>
<style type="text/css">
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 {
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;
}
</style>
</head>
<body>
<form id="demoForm">
<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 src="jquery-3.1.0.min.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(document).ready(function(){
rules:{
username:{
required:true,
minlength:2,
maxlength:10
},
password:{
required:true,
minlength:2,
maxlength:16
}
},
messages:{
username:{
required:"用户名不能为空",
minlength:"用户名最少为2位",
maxlength:"用户名最多为10位"
},
password:{
required:"密码不能为空",
minlength:"密码最少为2位",
maxlength:"密码最多为16位"
}
}
});
</script>
</body>
</html>
