<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证</title>
<style type="text/css">
body{margin: 0;padding: 0}
form{margin: 50px 100px;height: auto;}
legend{font-size: 24px;font-weight: bold}
p label{font-size: 18px;font-family: 微软雅黑;display: inline-block;width: 80px;}
p input{width: 140px;height: 20px;line-height: 20px;font-size: 16px}
#sub{width: 80px;height: 30px;}
form p:last-child{margin-left: 80px;margin-bottom: 10px}
</style>
<script src="jquery.validate-1.13.1.js"></script>
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
validator = $("#demoForm").validate({
rules: {
username: {
required: true,
minlength: 2,
maxlength: 10
},
password: {
required: true,
minlength: 2,
maxlength: 16
},
"confirm-password": {
equalTo: "#password";
}
},
messages: {
username: {
required: '请输入用户名',
minlength: '用户名不能小于2个字符',
maxlength: '用户名不能超过10个字符',
},
password: {
required: '请输入密码',
minlength: '密码不能小于2个字符',
maxlength: '密码不能超过16个字符'
},
"confirm-password": {
equalTo: "两次输入密码不一致"
}
}
})
})
</script>
</head>
<body>
<form id="demoForm">
<fieldset>
<legend>会员登录</legend>
<p id="info"></p>
<p>
<label for="username">用户名:</label>
<input type="text" name="username" id="user">
</p>
<p>
<label for="password">密 码:</label>
<input type="password" name="password" id="psd">
</p>
<p>
<label for="confirm-password">确认密码:</label>
<input type="password" name="confirm-password" id="conf">
</p>
<p>
<input type="submit" id="sub" name="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
一米一一3192659
相关分类