核心提示：正则表达式，表单验证HTML、CSS代码实例span style=font-family: Arial, Helvetica, sans-serif; background-color: rgb(25...
正则表达式，表单验证HTML、CSS代码实例
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">正则表达式的基本内容：正则表达式按照某种规则去匹配复合条件的字符串</span>
通配符：
.在正则表达式是任意字符
字面量：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，b，c归为一类，表达式可以匹配这类字符
字符类取反
使用元字符……创建反向类/负向类
反向累的意识是不属于某类的内容
表达式[^abc]表示不是字符a，b，c的内容
范围类：
[a-z]这还是一个闭区间包含a和z本身
‘a1b2d3x4z9’.repalce(/[a-z]/g，'Q')
在【】组成的类内部是可以连写的例如【a-zA-Z】
‘20163050-2018’.replace(/[0-9]g，'A')
【0-9】表示一个范围可以直接把横线匹配出来
【0-9-】表示得是把里面的横线也都匹配上的
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">
<p class="containt">
<p class="top">
<p class="top1">Username:
<input type="text" id="name" class="marin" />
<p> </p>
</p>
<p class="top2" >Password:
<input type="password" id="" name="" disabled=""/>
<p> </p>
</p>
<ul class="prefun">
<li class="k" > weakness </li>
<li class="kiss"> Strong </li>
<li class="kiss" > Stronger</li>
</ul>
<p class="top3">Enter password again:
<input type="password" id="" name="" disabled="">
<p> </p>
</p>
<p class="top4">Phone number
<input type="text" id="" name="" class="marin" />
</p>
</p>
<p class="footer">
<input type="button" class="tuy" value="Application for registrations">
</p>
</p>
</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;
}
