JQuery Validation Test

最新推荐文章于 2020-11-17 23:01:17 发布

Elim-Zhang

最新推荐文章于 2020-11-17 23:01:17 发布

阅读量510

点赞数

分类专栏： jquery validation HTML JavaScript 正则表达式

本文链接：https://blog.csdn.net/zylzb/article/details/40510643

版权

JavaScript 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

jquery

9 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

今天弄了下JQuery的Validation，直接贴代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> JQuery Validation Test </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  
  <style type="text/css">
	#allDiv {
		text-align:left;
		width:500px;
		border:1px solid red;
	}
	label.error {
		color: red;/*错误信息的颜色*/
	}
	input.error {
		border:1px dotted red;/*输入错误的输入框的边框样式*/
	}
  </style>
	
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.validate.min.js"></script>
  <script type="text/javascript">
	$(function() {
		//可以这样定义自己的验证方式,主要是利用JQuery Validation给我们提供的jQuery.validator.addMethod( String name, Function rule, String message ) 方法,
		//第一个参数是自定义的认证的名称，第二个参数是处理方法，第三个参数是默认的信息
		// 电话号码验证       
		 jQuery.validator.addMethod("tel", function(value, element) {       
			 var tel = /^\d{3,4}-?\d{7,8}$/;    //电话号码格式010-12345678   
			 return this.optional(element) || (tel.test(value));       
		 }, "the tel is not valid!");  

		$("#form1").validate({//参数是一个对象，这个一般的配置都是这样的
			rules: {//rules里面的属性名都是输入框的name属性值
				name: "required",//name表示某一输入框的name的属性值,换句话说就是用于验证的表单元素的name而不是id
				username: "required",
				password: {//有多个约束的时候就写成一个对象
					required: true,
					minlength: 6,
					maxlength:16
				},
				repassword: {
					equalTo: "#password"
				},
				email: {
					required: true,
					email: true
				},
				tel: {
					required: true,
					tel: true//这是上面自定义的验证方式
				}
				//约束还可以是：rangelength: [2, 6]，长度的范围
				//min,max 最大值,最小值
				//range: [13, 23] 取值范围
				//url,是一个URL
				//date,是一个日期
				//dateISO,是一个ISO日期
				//dateDE,德国日期
				//decimal,是一个十进制的数
				//digits,只能是数字
				//creditcard,信用卡式的数字
				//accept,表示哪些文件是被允许的，accept: "xls|csv"，只有xls和csv文件才能通过验证,默认是jpeg,gif,png式的图片文件
				//对于复杂的验证方式可以向上面的验证电话号码的方法自定义验证方式，并使用正则表达式来实现
			},
			messages: {
				name: "name is empty!",
				username: "username is empty!",
				password: {
					required: "password is empty!",
					minlength: "the minlength is 6 !",
					maxlength: "the maxlength is 16 !"
				},
				repassword: "the repassword is not equal to password!",
				email: {
					required: "we need your email address! ",
					email: "your email is not valid!"
				},
				tel: {
					required: "tel is empty!",
					tel: "tel is not valid!"
				}
			}
		});
	});
  </script>
 </head>

 <body>
 <center>
 <div id="allDiv">
	<form id="form1">
		name:<input type="text" name="name"><br>
		username:<input type="text" name="username"><br>
		password:<input type="password" name="password" id="password"><br>
		repassword:<input type="password" name="repassword"><br>
		email:<input type="text" name="email"><br>
		tel:<input type="text" name="tel"><br>
		<input type="submit" value="submit">
	</form>
 </div>
 </center>
 </body>
</html>

Elim-Zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery Validation Test

今天弄了下JQuery的Validation，直接贴代码 JQuery Validation Test #allDiv { text-align:left; width:500px; border:1px solid red; } label.error { color: red;/*
复制链接

扫一扫