标签：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style>
label{
width:66px;
text-align: right;
display: block;
float: left;
}
fieldset {
width: 300px;
height: 200px;
}
input{
border:1px solid #ccc;
border-radius: 3px;
width: 200px;
height: 30px;
padding:0 5px;
}
input[type="submit"]{
background: #d8d8d8 repeat;
border: none;
width: 100px;
display: block;
margin:20px auto;
height: 35px;
border-radius: 3px;
cursor: pointer;
}
input.error {
border: 1px solid red;
}
label.error {
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
width: 100%;
display: block;
text-align:left;
}
label.checked {
}
</style>
</head>
<body>
<form id="form">
<fieldset>
<legend>用户登录</legend>
<p>
<label for="username">用户名：</label>
<input type="text" name="username" />
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" />
</p>
<input type="submit" value="登录" />
</fieldset>
</form>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
//表单验证
$(function() {
$(‘#form‘).validate({
// debug:true,
rules: {
username: {
required: true,
minlength: 2,
maxlength: 10
},
password: {
required: true,
minlength: 6,
maxlength: 11
}
},
messages: {
username: {
required: "必须填写用户名",
minlength: "商品名称最小长度为2",
maxlength: "商品名称最大长度为10"
},
password: {
required: "必须填写密码",
minlength: "密码最小长度为6",
maxlength: "密码最大长度为11"
}
}
});
})
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/zhouyx/p/4655389.html
