前端 —— JavaScript 基础篇 22 --- 正则表达式

正则表达式

是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达 对字符串的一种过滤逻辑。

 正则表达式：就是用一个“字符串”来描述一个特征，然后去验证另一个“字符串”是否符合这个特征。

用途

给定一个正则表达式和另一个字符串，我们可以达到如下的目的：

1. 给定的字符串是否符合正则表达式的过滤逻辑（称作“匹配”）；

2. 可以通过正则表达式，从字符串中获取我们想要的特定部分。

正则表达式的特点是：

1. 灵活性、逻辑性和功能性非常的强；

2. 可以迅速地用极简单的方式达到字符串的复杂控制。

字符	说明
/	表示文本正则表达式的开始或结束。
\	将下一字符标记为特殊字符、文本、反向引用或八进制转义符。例如，“n”匹配字符“n”。“\n”匹配换行符。序列“\\”匹配“\”，“\(”匹配“(”。
^	匹配输入字符串开始的位置。
$	匹配输入字符串结尾的位置。
*	零次或多次匹配前面的字符或子表达式。例如，zo* 匹配“z”和“zoo”。* 等效于 {0,}。
.	匹配除换行符 \n 之外的任何单个字符。若要匹配 .，请使用 \。
+	一次或多次匹配前面的字符或子表达式。例如，“zo+”与“zo”和“zoo”匹配，但与“z”不匹配。+ 等效于 {1,}。
?	零次或一次匹配前面的字符或子表达式。例如，“do(es)?”匹配“do”或“does”中的“do”。? 等效于 {0,1}。
{n}	n 是非负整数。正好匹配 n 次。例如，“o{2}”与“Bob”中的“o”不匹配，但与“food”中的两个“o”匹配。
{n,}	n 是非负整数。至少匹配 n 次。例如，“o{2,}”不匹配“Bob”中的“o”，而匹配“foooood”中的所有 o。“o{1,}”等效于“o+”。“o{0,}”等效于“o*”。
{n,m}	M 和 n 是非负整数，其中 n <= m。匹配至少 n 次，至多 m 次。例如，“o{1,3}”匹配“fooooood”中的头三个 o。'o{0,1}' 等效于 'o?'。注意：您不能将空格插入逗号和数字之间。
[a-z]	字符范围。匹配指定范围内的任何字符。例如，“[a-z]”匹配“a”到“z”范围内的任何小写字母。
[^ a-e]	反向范围字符。匹配不在指定的范围内的任何字符。例如，“[^a-e]”匹配任何不在“a”到“z”范围内的任何字符。

字符	说明
\b	匹配一个字边界，即字与空格间的位置。例如，“er\b”匹配“never”中的“er”，但不匹配“verb”中的“er”。
\B	非字边界匹配。“er\B”匹配“verb”中的“er”，但不匹配“never”中的“er”。
\d	数字字符匹配。等效于 [0-9]。
\D	非数字字符匹配。等效于 [^0-9]。
\f	换页符匹配。等效于 \x0c 和 \cL。
\n	换行符匹配。等效于 \x0a 和 \cJ。
\r	匹配一个回车符。等效于 \x0d 和 \cM。
\s	匹配任何空白字符，包括空格、制表符、换页符等。与 [ \f\n\r\t\v] 等效。
\S	匹配任何非空白字符。与 [^ \f\n\r\t\v] 等效。

\t	制表符匹配。与 \x09 和 \cI 等效。
\v	垂直制表符匹配。与 \x0b 和 \cK 等效。
\w	匹配任何字类字符，包括下划线。与“[A-Za-z0-9_]”等效。
\W	与任何非单词字符匹配。与“[^A-Za-z0-9_]”等效。

 

来看几个简单的写法

<p>6-30位 的数字 字母 下划线</p>
	<script type="text/javascript">
		var username=/^ \w{6,30} $/;	                
	</script>

<p>6-10位密码</p>
	<script type="text/javascript">
		    var pass=/^ \w{6,10} $/        
	</script>


<p>qq号  5-12位  （都是数字）</p>
	<script type="text/javascript">
		
		 var qq=/^ \d{3,12} $/
	</script>


<p>3位区号-8位电话号码  或者  4位区号-8位号码(座机号码 的组成  区号-电话号码)</p>
	<script type="text/javascript">
		   var tal=/^ (\d{3} - \d{8}) | (\d{4} - \d{8) $/;         
	</script>

<p>邮箱  1到n个字母 数字 下划线 跟 @  跟1到n字母数字</p>
	<script type="text/javascript">
		 var email=/^ \w+@+\w+(.com|.cn|.net|.org)(.cn)? $/           
	</script>

.test();

test() 方法用于检测一个字符串是否匹配某个模式.

看个小【实例】：

<style type="text/css">
		.regCon{
			height: 40px;
			margin-top: 30px;
			line-height: 40px;
		}
		.rcLeft{
			border: 1px solid #e6e6e6;
			height: 40px;
			width: 400px;
			float: left;
			margin-right: 10px;
		}
		.rcLeft lable{
			border-right: 1px solid #e6e6e6;
			margin-right: 10px;
			width: 100px;
			text-align: center;
			height: 40px;
			display: block;
			float: left; 
		}
		input{
			width: 270px;
			height: 38px;
			float: left;	
			line-height: 30px;
			outline: none;
			border: none;

		}
		.btnDiv{
			width: 400px;
			margin-top:30px;
			height: 42px;
		}
		.btnRegister{
			width: 100%;
		    height: 42px;
		    line-height: 42px;
		    border-radius: 4px;
		    background: #3f99e6;
		    font-size: 16px;
		    color: #fff;
		    text-align: center;
		    cursor: pointer;
		    font-weight: bold;
		}
		.tips{
			color: red;
		}
	</style>


<div id="content">
	<form action="#" method="post" id="form">
		<div class="regCon">
			<div class="rcLeft">
				<lable>登录名：</lable>
				<input type="text" id="userName" placeholder="请输入用户名" />
			</div>
			<label id="s_username" class="tips"> </label>
		</div>
		<div class="btnDiv">
			<input type="submit" class="btnRegister" value="注 册">
		</div>
	</form>
</div>


<script type="text/javascript">
	document.getElementById("form").onsubmit = function () {
		return  checkUserName();
	}
	document.getElementById("userName").onblur = checkUserName;
	function checkUserName() {
		  //获取用户名的值
		 var username = document.getElementById("userName").value;

		//定义正则表达式
		var reg_username = /^([a-zA-Z0-9_-])/;
		//判断值是否符合正则表达式的规则
		var flag = reg_username.test(username);

	    //提示信息
		var s_username = document.getElementById("s_username");

		if (flag) {
		    //提示绿色对勾
		    s_username.innerHTML = '<img src="../../images/duihao.jpg" class="dhimg" width="25" height="21">';
		 } else {
		     //提示红色错误信息
		     s_username.innerHTML = "字母、数字、下划线组成，字母开头，4-16位。！";
		 }
		 return flag;
	}
</script>

 

 

下一篇 ----注册页面的例子

 

 

我的文章都是学习过程中的总结，如果发现错误，欢迎留言指出，我及时更正。