jQuery插件jQuery-validation的基本用法（一）

川长思鸟来 2022-08-20 04:24 215阅读 0赞

基本用法如下：

如果需要修改提示文本的样式，那么需要在css中如下定义：

/*用".error 来设置错误信息的样式"*/
    label.error {
    	margin-left: 10px;
    	color: blue;
    }

一个完整的页面用法如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>jQuery Validation 插件</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <link rel="stylesheet" type="text/css" href="css/style.css">
    	
      </head>
      
      <body>
        <form id="demoForm" action="">
        	<fieldset>
        		<legend>用户登录</legend>
        		<p id="info"></p>
        		<p>
        			<label for="username">用户名</label>
        			<input type="text" id="username" name="username" />
        		</p>
        		<p>
        			<label for="password">密码</label>
        			<input type="password" id="password" name="password" />
        		</p>
        		<p>
        			<label for="confirm-password">确认密码</label>
        			<input type="password" id="confirm-password" name="confirm-password" />
        		</p>
        		
        		<p>
        			<input type="submit" value="登录"/>
        		</p>
        	</fieldset>
        </form>
        
        <script src="js/jquery-2.2.0.js" type="text/javascript"></script>
        <script src="js/jquery.validate.js" type="text/javascript"></script>
        
        <script type="text/javascript">
        	$(function() {
        		$("#demoForm").validate({
        			//调试模式，也就是说按下提交按钮的时候并不会提交
        			debug:true,
        			//rules的键是表达中的name属性而不是id
        			rules: {
        				username: {
        					//需要填
        					required:true,
        					//最小长度
        					//minlength:2,
        					//最大长度
        					//maxlength:10,
        					//直接定义范围
        					//rangelength:[2,10],
        					//希望用户输入的是数字，范围是2-10,range就直接代表值的范围
        					//min:2,
        					//max:10,
        					//range:[2,10],
        					//填写的必须是email
        					//email:true,
        					//填写的必须是url地址
        					//url:true,
        					//要求输入的是日期,日期的格式必须是要被Date.parse识别,因为识别范围很广所以一般不用
        					//date:true,
        					//ISO格式严格的日期,格式必须是yyyy-mm-dd、yyyy/mm/dd、yyyy-mm/dd
        					//dateISO:true,
        					//数字校验
        					//number:true,
        					//输入必须是整数
        					digits:true,
        					
        					//发post请求
        					remote: {
        						url:"remote.json",
        						type:"post",
        						data:{
        							loginTime:function() {
        								//这里的+号表示调用getTime方法，返回的是毫秒值的long数值
        								return +new Date;
        							}
        						}
        					}
        					//默认的get请求
        					//remote:"remote.json"
        				},
        				password: {
        					required:true,
        					minlength:2,
        					maxlength:16,
        					
        				},
        				"confirm-password": {
        					equalTo:"#password"
        				}
        			},
        			//rules规则相应的提示信息
        			messages: {
        				username: {
        					required:"请填写用户名",
        					minlength:"用户名最小为2位",
        					maxlength:"最大最大为10位",
        					remote:"用户名不存在",
        					rangelength:"用户名的范围不对"
        				},
        				password: {
        					required:"请填写用户名",
        					minlength:"密码最小为2位",
        					maxlength:"最大最大为10位",
        				},
        				"confirm-password": {
        					equalTo:"两次输入密码不一致"
        				}
        			}
        		});
        	});
        </script>
        
      </body>
    </html>