频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
正则表达式,表单验证HTML、CSS代码实例
2017-11-14 11:31:43      个评论    来源:UESTC_mkm  
收藏   我要投稿

正则表达式,表单验证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;  
      
      
}  
点击复制链接 与好友分享!回本站首页
上一篇:列举一些不常用的 Web API 接口
下一篇:CSS背景图套路之单一元素设置多背景图的方法
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站