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

最新推荐文章于 2022-11-09 11:33:59 发布

tyilack_小小黑

最新推荐文章于 2022-11-09 11:33:59 发布

阅读量592

点赞数

分类专栏： html javascript jQuery 文章标签： javascript jquery jquery插件

本文链接：https://blog.csdn.net/u014520745/article/details/50612778

版权

javascript 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

jQuery

8 篇文章 0 订阅

订阅专栏

基本用法如下：

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

如果需要修改提示文本的样式，那么需要在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>

tyilack_小小黑

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件jQuery-validation的基本用法（一）

基本用法如下： $(function() { $("#demoForm").validate({ //调试模式，也就是说按下提交按钮的时候并不会提交 debug:true, //rules的键是表达中的name属性而不是id rules: { username: { //需要填
复制链接

扫一扫