当前位置: 首页 > 我要学前端 > 三天学会用JS正则 > 第三天:正则在项目中的实际应用

第三天:正则在项目中的实际应用

支持左(←)、右(→)方向键,切换到下一章。

这一天没有什么好说的,就是自己编造一些实际的例子多多写!

把下面的代码保存为HTML页面,可以看到实际的效果。达人说:正则没有好和坏,实现了结果就是对的!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.item, .item-buttons { margin:0; padding:0 0 10px 0; list-style:none; font-size:14px; }
.item input { width:240px; padding:5px; }
.item .title { font-weight:bold; }
.item .required { color:red; }
.item .tips { font-size:12px; color:#666666; }
.item-buttons { padding-top:20px; }
.item-buttons button { margin:0 12px 0 0; font-size:14px; font-weight:bold; padding:5px 10px; }
</style>
</head>

<body>
	<form id="validate-form">
		<ul>
			<li class="item"><label class="title"><span class="required">*</span>姓名:</label><div class="inputbox"><input type="text" name="name" data-validate="chinese"></div><span class="tips">只能输入中文字符.</span></li>
			<li class="item"><label class="title"><span class="required">*</span>密码:</label><div class="inputbox"><input type="text" name="pw" data-validate="password"></div><span class="tips">6-18数字和字母,且至少有一个字母.</span></li>
			<li class="item"><label class="title"><span class="required">*</span>手机号码:</label><div class="inputbox"><input type="text" name="mobile" data-validate="mobile"></div><span class="tips">11手机号码并以13,14,15,18开头.</span></li>
			<li class="item"><label class="title">电子邮箱:</label><div class="inputbox"><input type="text" name="email" data-validate="email"></div><span class="tips">正确的邮箱格式:demo@demo.com.</span></li>
			<li class="item"><label class="title">年龄:</label><div class="inputbox"><input type="text" name="age" data-validate="age"></div><span class="tips">请输入两位数字,第一位不能是0.</span></li>
			<li class="item"><label class="title">生日:</label><div class="inputbox"><input type="text" name="birthday" data-validate="birthday"></div><span class="tips">正确的日期格式:2014-07-28.且年份是1920-2014之间</span></li>
			<li class="item"><label class="title">邮政编码:</label><div class="inputbox"><input type="text" name="zip" data-validate="zip"></div><span class="tips">请输入6位数字,如414311.</li>
			<li class="item-buttons">
			<button type="submit" value="submit">提交数据</button>
			<button type="reset" value="reset">重置表单</button>
			</li>
		</ul>
	</form>
<script src="http://www.estorm.cn/theme/scripts/jquery/jquery-1.11.1.min.js"></script>
<script>
jQuery(function(){
	var chinese = function(v){
		var r = true;
		var regex = /^[\u4E00-\u9FA5]+$/g;
		var result = regex.test(v);
		if(!result){
			r = false;
			alert('请输入中文字符!');
		}
		return r; 
	};
	var password = function(v){
		var r = true;
		var regex = /^(?!\d+$)[A-Za-z0-9]{6,18}$/g; //(?!\d+$) 这段是过滤掉全数字
		var result = regex.test(v);
		if(!result){
			r = false;
			alert('6-18数字和字符,且至少有一个字母!'); 
		}
		return r; 
	};
	var mobile = function(v){
		var r = true;
		var regex = /^1[3|4|5|8]\d{9}$/g;
		var result = regex.test(v);
		if(!result){
			r = false;
			alert('请输入正确的手机格式!'); 
		} 
		return r;
	};
	var email = function(v){
		var r = true;
		var regex = /^[\w]+@[\w]+[\.][\w]+$/g;
		var result = regex.test(v);
		if(!result){
			r = false;
			alert('请输入正确的电子邮箱格式!'); 
		}
		return r; 
	};
	var age = function(v){
		var r = true;
		var regex = /^[1-9][0-9]$/g;
		var result = regex.test(v);
		if(!result){
			r = false;
			alert('请输入100一下的数字!'); 
		}
		return r; 
	};
	var birthday = function(v){
		var r = true;
		var regex = /^([1][9][2-9]\d|[2][0][0-1][0-4])\-(0[1-9]|1[0-2])\-(0[1-9]|[1-2]\d|3[0-1])$/g; //1920-2014
		//var regex = /^19[2-9]\d|200\d|201[1-4]$/; 这个是另外一个人写的正则,同样能实现1920-2014这个年份的区间
		var result = regex.test(v);
		if(!result){
			r = false;
			alert('请输入正确的日期,如:2013-06-04!'); 
		}
		return r;
	};
	var zip = function(v){
		var r = true;
		var regex = /^[1-9]\d{5}$/g; 
		var result = regex.test(v);
		if(!result){
			r = false;
			alert('请输入正确的邮编,如:414311!'); 
		}
		return r;
	};
	$("#validate-form").on("submit", function(){ 
		var inputs = $(this).find("input");
		var r_array = true;
		$.each(inputs, function(){
			var v = $(this).data("validate");
			var f = eval(v);
			var r = f($(this).val());
			if(!r){
			r_array = false;
				return false;
			}
		});
		if(r_array){
			alert("恭喜你全部通过验证!") 
		}
		return false;
	});
});
</script>
</body>
</html>

学到这里我大概有一些把握,去写一个jQuery验证插件,请期待我的新插件!

如果你嫌弃上面的代码太长,点这里右键另存为下载”第三天:正则在项目中的实际应用.html“