正则表达式——表单验证

最新推荐文章于 2023-07-14 19:55:31 发布

UESTC_mkm

最新推荐文章于 2023-07-14 19:55:31 发布

阅读量244

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_41044542/article/details/78523063

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

正则表达式的基本内容：正则表达式按照某种规则去匹配复合条件的字符串

通配符：
.在正则表达式是任意字符

字面量：var reg =/\bis\b/g;
var reg=/\bis\b/g;

构造函数： var reg=new RefExp('\\bis\\b','g')

js通过内置对象RegExp支持正则表达式

实例化RegExp对象的两种

1.字面量

var reg = /\bis\b/g;

2.构造函数

var reg = new RegExp('\\bis\\b','g');

修饰符

g：global，全文搜索，不添加，搜到第一个匹配就停止

i: ignore case，忽略大小写，正则默认大小写敏感

m: multiple lines 多行搜索

元字符：是在正则表达式中有特殊含义的非字母字符

*+？￥……。|、（）{}【】

\t 水平制表符
\v 垂直制表符
\n 换行符
\r 回车符
\0 空字符
\f 换页符
\cX 与x对应的控制字符（ctrl+x）

3：字符类
一般情况下正则表达式是一个字符对应字符串一个字符

表达式ab\t的含义
匹配某类字符：元字符【】来构建一个简单地类，所谓的类实质复合某些特性的对，一个反之，而不是特指某个字符，表达式【abc】吧字符a，ｂ，ｃ归为一类，表达式可以匹配这类字符

字符类取反　
　使用元字符……创建反向类／负向类
反向累的意识是不属于某类的内容
表达式［＾ａｂｃ］表示不是字符ａ，ｂ，ｃ的内容

范围类：
［ａ－ｚ］这还是一个闭区间包含ａ和ｚ本身
‘ａ１ｂ２ｄ３ｘ４ｚ９’．ｒｅｐａｌｃｅ（／［ａ－ｚ］／ｇ，＇Ｑ＇）
在【】组成的类内部是可以连写的例如【ａ－ｚＡ－Ｚ】　
‘２０１６３０５０－２０１８’．ｒｅｐｌａｃｅ（／［０－９］ｇ，＇Ａ＇）
【０－９】表示一个范围可以直接把横线匹配出来

【０－９－】表示得是把里面的横线也都匹配上的

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表单验证</title>

	<link  href="css/form.css" rel="stylesheet">
	<script type="text/javascript" src="js/form.js"></script>
	</head>
	<body background="img/1052205.jpg">
		<div class="containt">
			<div class="top">
				
				<div class="top1">Username:
					<input type="text" id="name" class="marin" />
					<p> </p>
				</div>
				
				<div class="top2" >Password:
					<input type="password" id="" name="" disabled=""/>
					<p>   </p>
				</div>
				<ul class="prefun">
                    <li class="k" > weakness </li>
                    <li class="kiss"> Strong </li>
                    <li class="kiss" > Stronger</li>
                </ul>
                
				<div class="top3">Enter password again:
					<input type="password" id="" name="" disabled="">
					<p>   </p>
				</div>
				<div class="top4">Phone number
					<input type="text" id="" name="" class="marin" />
					
				</div>	
				
				</div>
				
				<div class="footer">
					<input type="button" class="tuy" value="Application for registrations">
				</div>
			</div>
		
	</body>
</html>

css代码：

@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	font-family: 微软雅黑;
}
.containt{
	margin: 0 auto;
	width:900px;
	height: 400px;
	padding-left: 30%;
	padding-top: 120px;

}
.top1{
	
	top: -100px;
	font-family: "微软雅黑";
	font-weight: bold;
	font-size: 16px;
	
	
}
#containt .top .top2{
	font-family: "微软雅黑";
	font-weight:100;
	
	font-size: 16px;
	line-height: 20px;
	padding: 20px opx 10px  0px;
	top: -90px;
}
.top3{
	font-size: 16px ;
	font-family:"微软雅黑";
	font-weight:bolder;
	color: #333;
	top: -10px;
	padding: 60px 10px 0px 0px;
	line-height: 10px;
   position: relative;
   
   
}
.top4{
	font-size: 16px;
	font-weight: bolder;
	color: #333;
	left:10px;
	line-height: 10px;
	padding: 20px 35px 0px 0px;
	left:-3px;
	font-family: "微软雅黑";
	position:relative;
	
}
img{
	width:100px;
	height: 40px;
	position: absolute;
	left: 400px;
	top: 34px;
}
input{
	width:200px;
	height: 40px;
	border: #B1B1B1 solid 1.5px;
	padding-left: 10px;
	line-height: 40px;
	color:#B1B1B1;
	font-size:15px;

}
.marin{
	margin-left: 5px 0px 5px 120px;
	width:200px;
}
.prefun{
	padding:5px 0px 5px 120px;
	width:200px;
	
}
.k{
	width: 70px;
	height: 20px;
	background-color: #C30;
	top: -70px;
	float: left;
	left: -30px;
	text-align: center;
	font-size: 12px;
	color: #fff;
	top: 20px;
	list-style: none;
	
}
.kiss{
	width:60px;
	height:20px;
	background-color:#CCC;
	float:left;
	left: 10px;
	
	top: 20px;
	text-align:center;
	font-size:8px;
	color:#fff;
    list-style:none;

}
#count{
    display:inline;
	color:#F00;
	margin-left:110px;
	font-size:14px;
	visibility:hidden;	
}


.containt .footer{
	top: 200px;
	color: white;
	display: inline;
	color: white;
	margin-left:110px;
	font-size: 14px;
	padding: 0px 0px;
}
/*.tuy{
	display: inline;
	color: #f00;
	margin-left:110px;
	font-size: 14px;
	padding: -50px 0px;
	
}*/

p{
	font-size: 15px;
	color: white;
	position: absolute;
	left:350px;
	top:20px;
	display: inline;
}
.no{
	background-image:url(../images/no.jpg);
	width:16px;
	height:21px;
	display:inline-block;
	}/*这是图片*/
	
.ok{
	background-image:url(../images/ok.png);
	width:12px;
	height:12px;
	display:inline-block;
	
	
}