js--正则表达式

最新推荐文章于 2024-09-30 11:27:43 发布

权-

最新推荐文章于 2024-09-30 11:27:43 发布

阅读量306

点赞数

文章标签： eclipse

本文链接：https://blog.csdn.net/Q_3344/article/details/124133100

版权

正则表达式简介

表单基本验证技术

文本框对象的属性、方法和事件:
在这里插入图片描述

定义正则表达式

var reg=/^\w{6,10}$/;

var reg=/^[0~9]{6}$/;

正则表达式基本书写符号

在这里插入图片描述

课堂案例1：表单验证基本使用-if

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form action="success.html" onsubmit="return checkName()">
			<div>
				<label>
				账号：<input id="name" type="text" />
				</label>
			</div>
			<div>
				<label>
				密码：<input id="pwd" type="passwordh" />	
				</label>
			</div>
			<div>
				<label>
				确认密码：<input id="pwd" type="passwordh" />	
				</label>
			</div>
			<div>
				<label>
				邮箱：<input type="text" id="email"/>	
				</label>
			</div>	
			<button type="submit">注册</button> <!-- 提交 -->
			<button type="reset">重置</button>
		</form>
	</body>
	<script type="text/javascript">
		function $(id){
			//通过id获取组件并返回
			return document.getElementById(id);
		}
		//验证账号和密码
		function checkName(){
			//获取账号组件
			var name=$("name").value;
			//判断账号是否为空
			if(""==name){//没有输入内容
				alert("账号不能为空");
				return false;
			}else{//输入了内容，进一步验证
				if(name.length<6||name.length>10){
					alert("账号长度在6~10之间");
					return false;
				}
			}
			
			//验证密码
			//获取密码组件
			var pwd=$("pwd").value;
			//判断是否为空
			if(""==pwd){
				alert("密码不能为空");
				return false;
			}
			
			//验证邮箱
			//获取邮箱
			var myEmail=$("email").value;
			//判断是否为空
			if(""==myEmail){
				alert("邮箱不能为空");
				return false;
			}else{
				var e1=myEmail.indexOf("@");
				var e2=myEmail.indexOf(".");
				if(e1==-1||e2==-1){
					alert("少了@或者.");
					return false;
				}else{
					if(e1>e2){
						alert("@要在.前面");
						return false;
					}
				}
			}
		}
	</script>
</html>

课堂案例2：表单验证-正则表达式

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="success.html" onsubmit="return checkAll()">
			<div>
				<label>
				账号：<input id="name" type="text" onkeyup="checkName()"/>
				<span style="color: red;" id="sname"></span>
				</label>
			</div>
			<div>
				<label>
				密码：<input id="pwd" type="passwordh" onkeyup="checkPwd() />	
				<span style="color: red;" id="spwd"></span>
				</label>
			</div>
			<button type="submit">注册</button> <!-- 提交 -->
			<button type="reset">重置</button>
		</form>
	</body>
	<script type="text/x-javascript">
		function $(id){
			//通过id获取组件并返回
			return document.getElementById(id);
		}
		//正则表达式验证
		//账号验证：只能由数字和大小写字母组成，并且长度在6至10
		function checkName(){
			//获取账号
			var name=$("name").value;
			//定义正则表达式
			var reg=/^\w{6,10}$/;
			if(!reg.test(name)){
			$("sname").innerHTML="账号不符合规则";
				return false;
			}else{//输入正确	
			//清空
				$("sname").innerHTML="";
				return true;
			}
		}
		
		//密码验证：只能由数字组成，长度为6
		function checkPwd(){
			//获取账号
			var pwd=$("pwd").value;
			//定义正则表达式
			var reg=/^[0~9]{6}$/;
			if(!reg.test(pwd)){
			$("spwd").innerHTML="密码不符合规则";
				return false;
			}else{//输入正确	
			//清空
				$("spwd").innerHTML="";
				return true;
			}
		}
		
		//总方法
		function checkAll(){
			//调用验证组件的方法
			if(!checkName()||!checkPwd()){
				return false;
			}else{
				return true;
			}
		}
	</script>
</html>