Java正则表达式三:正则表达式在JavaScript中的应用;(字符串校验的小例子)

一:正则表达式在JavaScript中的应用范例:

例如前台界面提交表单的时候,需要对表单中输入框内容进行校验。符合输入规则,则校验成功,提交表单;不符合输入规则,则校验不成功,提示相关错误信息。

正则表达式常用于校验这个需求

index.html:

          (1)JavaScript中定义正则表达时对象:var regex1 = /^[\u4e00-\u9fa5]{2,8}$/;  即定义在俩斜杠中间,并且用一个变量去接收

          (2)JavaScript中的正则表达式对象的test()方法用于校验字符串是否符合正则表达式的校验规则;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<form action="#" method="post" id="frmInfo">
		<div id="err" style="color:red">
		</div>
		<div>  
			姓名:<input id="name" name="name" />
		</div>
		<div>
			身份证:<input id="idNo" name="idNo" />
		</div>
		<div>
			<input type="submit"/>
		</div>
	</form>
	<script type="text/javascript">
		document.getElementById("frmInfo").onsubmit = function(){
			//在JavaScript中定义的正则表达式对象,只需要在两个斜杠中间书写正则表达式后,就能在JavaScript中获得一个正则表达式对象,
			// 然后用一个变量去接受就可以了;
			var regex1 = /^[\u4e00-\u9fa5]{2,8}$/; // 校验姓名的正则表达时
			var regex2 = /^[1234568]\d{16}[0-9xX]$/;// /^[1234568]\d{16}[\dxX]$/这样写,经过实测也是可以的哦
			var name = document.getElementById("name").value;
			var idNo = document.getElementById("idNo").value;
			if(regex1.test(name) == false){// JavaScript的正则表达式对象提供了test()方法,返回值为true(匹配)或false(不匹配);
				document.getElementById("err").innerHTML = "无效姓名";
				return false;
			}else if(regex2.test(idNo) == false){
				document.getElementById("err").innerHTML = "无效idNo";
				return false;
			}
			else{
				return true;
			}
			  
		}
	
	</script>
</body>
</html>

上面,对name和id进行了校验,像这种逐梯次的挨个校验,以前做项目的时候也采取过这种if else的挨个判断的结构,这种结构可以很好地定位究竟是哪一个输入框出了错,方便弹出提示;

效果:    

   


其实还好,在JavaScript中进行校验输入框的时候,采取即插即用,随用随取的态度应该就可以了吧~~~

然后,JavaScript中正则表达式的应用肯定有很多其他方面,后续补充……

然后,表单输入项校验这个工作一般习惯于交给前端解决?

猜你喜欢

转载自blog.csdn.net/csucsgoat/article/details/114108353
今日推荐