表单验证
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style>
label {
width: 86px;
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: 10px 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" id="username"/>
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password"/>
</p>
<p>
<label for="confirm-password">重复密码：</label>
<input type="password" name="confirm-password" id="confirm-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({
rules: {
username: {
required: true,
minlength: 2,
maxlength: 20,
//min:3,
//max:10,
//email:true,
//url:true,
//date:true,
//number:true,
},
password: {
required: true,
minlength: 6,
maxlength: 11
},
"confirm-password":{
equalTo:"#password"
}
},
messages: {
username: {
required: "必须填写用户名",
minlength: "商品名称最小长度为2",
maxlength: "商品名称最大长度为10",
email: "格式不正确"
},
password: {
required: "必须填写密码",
minlength: "密码最小长度为6",
maxlength: "密码最大长度为11"
},
"confirm-password": {
equalTo:"两次密码不一致"
}
}
});
})
</script>
</body>
</html>
