jquery.validate.js简单实用实例

最新推荐文章于 2019-02-07 10:10:15 发布

猫哈噗啦啦吖

最新推荐文章于 2019-02-07 10:10:15 发布

阅读量428

点赞数

分类专栏： JQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/qq_26624661/article/details/52706116

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>