正则表达式——表单验证2

2017年5月27日 0条评论

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换。

以及用正则表达式来完善之前的表单：

什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

语法

/正则表达式主体/修饰符(可选)

其中修饰符是可选的。

实例：

		var patt = /runoob/i
	

实例解析：

/runoob/i 是一个正则表达式。

runoob 是一个正则表达式主体 (用于检索)。

i 是一个修饰符 (搜索不区分大小写)。

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

正则表达式模式

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

使用 RegExp 对象

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

使用 test()

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 "e"：

实例

	var patt = /e/;

patt.test("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为：

	true

下面用正则表达式的方式来更改： 正则表达式——表单验证1

以下为全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table>
		<tr>
			<td>用户名：</td>
			<td><input type="text" name="yhm" id="yhm"></input></td>
			<td></td>
		</tr>
		<tr>
			<td>密码：</td>
			<td><input type="password" name="mm1" id="mm1"></input></td>
			<td></td>
		</tr>
			<td>确认密码：</td>
			<td><input type="password" name="mm2" id="mm2"></input></td>
			<td></td>
		</tr>
		</tr>
			<td>性别：</td>
			<td><input type="radio" name="sex" id="sex1" checked>男</input>
				<input type="radio" name="sex" id="sex2">女</input>
			</td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td>
				<button id="btn">提交</button>
				<input type="reset" id="cz"></input>
			</td>
			<td></td>
		</tr>
	</table>
</body>
<script type="text/javascript">
	var oBtn=document.getElementById('btn');
	var oYhm=document.getElementById('yhm');
	var oMm1=document.getElementById('mm1');
	var oMm2=document.getElementById('mm2');
	var oCz=document.getElementById('cz');


	oBtn.onclick=function(){

		var yhm=oYhm.value;
		var len=oYhm.value.length;
		var len2=oMm1.value.length;
		
		var reg=/^[a-zA-Z0-9]{4,16}$/;
		
		if(!reg.test(yhm)){
			alert("名字长度应该在4-16之间的字母或者数字");
		}

		var regmm=/^.{6,12}$/;
		if(!regmm.test(oMm1.value)){
			alert("密码长度应该在6-12之间");
		}

		if(oMm2.value != oMm1.value){
			alert("两次密码不一致");
		}

		oCz.onclick=function(){
			oYhm.value="";
			oMm1.value="";
			oMm2.value="";
			oYhm.focus();
		}
	}
	</script>

</html>

Plugins by fishyoung.com

您阅读这篇文章共花了：