jquery.validate.js简单实用实例

﹏ヽ暗。殇╰゛Y 2022-07-16 02:55 183阅读 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>