您的位置：首页 > Web前端 > JQuery

jquery.validate.js简单实用实例

2016-09-29 23:41 302 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.validate.js简单实用实例</title>
<script src="jquery-2.1.1.js"></script>
<script src="jquery.validate.js"></script>
<script src="validate_lang_zn.js"></script>
<script>
$(function(){
$("#myForm").validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent());
},
rules:{
uname: "required", /*必填字段验证*/
pwd:{
required: true,
minlength: 5, /*最小长度为5*/
maxlength: 10 /*最大长度为10*/
},
cpwd: {
required: true,
equalTo: "#pwd" /*与密码框的密码保持一致*/
},
email:{
required: true,
email: true /*校验正确的邮箱格式*/
},
birthday:{
required: true,
},
"colors":{
required: "#a:checked", /*只有在表达式为真的情况下才去验证*/
minlength: 2
}
},
messages:{ /*自定义显示的提示*/
uname:"请填写用户名",
pwd:{
required: "请填写密码",
minlength: "密码长度不能小于5",
maxlength: "密码长度不能大于10"
},
cpwd: {
required: "请确认密码",
equalTo: "密码不一致，请重新确认"
},
email:{
required: "请填写邮箱",
email: "请填写正确的邮箱格式",
},
birthday:{
required: "请填出生日期"
},
"colors":{
required: "请选择颜色",
minlength: "最少选择两个"
}
}
});
})
</script>
<style>
input.error { /*自定义文本框错误样式*/
border: 1px solid red;
}
label.error { /*自定义错误样式*/
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: red;
}
</style>
</head>

<body>
<form id="myForm" method="post">
<p>姓名:<input type="text" name="uname" /></p>
<p>密码:<input type="password" id="pwd" name="pwd" /></p>
<p>确认:<input type="password" name="cpwd" /></p>
<p>邮箱:<input type="text" name="email" /></p>
<p>生日:<input type="text" name="birthday" /></p>
<p>地址:<input type="text" name="addr" /></p>
<p>
<label for="newsletter">勾选我校验颜色</label>
<input type="checkbox" id="a" name="a">
</p>
<p>
<fieldset style="width:200px;">
<legend>颜色</legend>
<input type="checkbox" value="red" name="colors">红色
<input type="checkbox" value="blue" name="colors">蓝色
<input type="checkbox" value="yellow" name="colors">黄色
</fieldset>
</p>
<p>地址:<input type="submit" value="提交" /></p>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JQuery

相关文章推荐

新的分享

章节导航