二十四、form 表单验证+简单注册正则表达式

最新推荐文章于 2024-05-16 03:08:12 发布

蕙惠子

最新推荐文章于 2024-05-16 03:08:12 发布

阅读量2.3k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40976555/article/details/80487706

版权

前端专栏收录该内容

53 篇文章 2 订阅

订阅专栏

一、知识点

1.JavaScript正则表达式：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。（搜索模式可用于文本搜索和文本替换）

2.正则表达式概念：由一个字符序列形成的搜索模式；

3.语法：var 名称=/正则表达式主体/;

4.字符串方法：

search()方法用于检索字符串中指定的子字符串或与正则表达式相匹配的子字符串，并返回子字符串的起始位置；

replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串；

Eg: var str=”i love you”; var n=str.search(“love”);

var str = document.getElementById("demo").innerHTML;

var txt = str.replace("Microsoft","Runoob");//输出将Microsoft 替换为Runoob

5.常用的字符

字符	描述	字符	描述
\cx	匹配由x指定的控制字符	()	标记子表达式
\f	换页符	*	匹配子表达式0次或多次
\n	换行符	+	匹配子表达式1次或多次
\r	回车符	.	除\n之外的任何字符
\s	任何空白字符 (包括空格制表换页等)	\|	二选一匹配
\t	制表符	？	匹配前面的子表达式0次或一次
\v	垂直制表符	{n}	n是非负整数,匹配n次
$	输入字符串结尾位置	{n,}	匹配至少n次
^	输入字符串开始位置	{n,m}	匹配范围,n<=m次
\b	匹配一个字边界	\d	数字字符
\B	非字边界匹配	\D	非字符数字
\w	匹配包括下划线的任何字符	\W	匹配任何非单词字符

6.检测匹配的方法

Match()方法：使用正则表达式模式对字符串执行查找，匹配返回值，否则返回null;

test()方法：匹配返回ture 否则返回false

二、简单的邮箱注册表单验证

1.基础界面

2.验证正则表达式

一般邮箱格式是：数字/字母/下划线(5-10位)+@+字母/数字(2-5位)+”.”+com

var email=/^\w{5,10}\@[0-9a-z]{2,5}\.[c,o,m]{3}$/;

邮箱验证码：6位纯数字验证码

var id_e=/^\d{6}$/;

密码：字母/数字/英文符号(最短8位)

var password=/^[0-9a-zA-Z.,;'/]{8,}$/;

3.封装验证错误提示信息

//错误提示函数
function errorshow(num,str,res){
    //尝试获取错误提示
    var error=txt[num].parentNode.getElementsByClassName("error")[0];
    if(res){ //res==true
        if(error!=undefined){
            if(error.length!=0){
                error.remove();
            }
            return;
        }
    }
    else{ //res==false
        if(error!=undefined){ //同一输入行多种错误提示切换
            error.innerHTML=str;
        }else{
            /*创建错误提示*/
            var err=document.createElement("span");
            err.className="error";
            err.innerHTML=str;
            txt[num].parentNode.appendChild(err);
        }
    }
}

4.正则判断调用错误提示信息方法；

提示效果：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单正则表达式</title>
    <style>
        *{margin: 0;padding: 0;}
        body,html{
            background-color: #f6f8f9;}
        .block{
            width: 800px;
            height: 600px;
            margin: 0 auto;
            background-color: #fff;
        }
        .ulist{
            margin: 0 120px;
        }
        .list{
            list-style: none;
            /*line-height: 100px;*/
            margin-top: 30px;
        }
        .span{
            display: inline-block;
            width: 100px;
        }
        .txt{
            display: inline-block;
            width: 300px;
            height: 30px;
            outline: none;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .emil{
            width: 100px;
            height: 32px;
            color: #a5a6aa;
        }
        .zhuce{
            width: 100px;
            height: 32px;
            background-color: #44b549;
            color: white;
            margin-left: 250px;
            outline: none;
            margin-top: 10px;
        }
        .text{
            width: 320px;
            height: auto;
            list-style: none;
            line-height: 20px;
            font-size: 14px;
            color: #8d8d8d;
            margin-left: 100px;
        }
        .error{
            color: red;
            display: block;
            margin-left: 100px;
            line-height: 20px;
            font-size: 14px;
            /*margin-bottom: 5px;*/
        }
    </style>
</head>
<body>
<form class="block" οnsubmit="return Submit()">
     <p style="margin-left: 120px;padding-top: 30px;">每个邮箱仅能申请一种帐号 </p>
    <ul class="ulist">
        <li class="list"><span class="span">邮箱</span><input class="txt" type="text"><a href="#" style="text-decoration: none"><button class="emil">激活邮箱</button></a></li>
        <li class="text">作为登录帐号，请填写未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱</li>
        <li class="list"><span class="span">邮箱验证码</span><input class="txt" type="text"></li>
        <li class="text">激活邮箱后将收到验证邮件，请回填邮件中的6位验证码</li>
        <li class="list"><span class="span">密码</span><input class="txt" type="text"></li>
        <li class="text">字母、数字或者英文符号，最短8位，区分大小写</li>
        <li class="list"><span class="span">确认密码</span><input class="txt" type="text"></li>
        <li class="text"> 请再次输入密码</li>
    </ul>
    <input class="zhuce" type="submit"value="注册">
</form>
<script>
        //获取输入框元素
        var txt=document.getElementsByClassName("txt");
        //提交方法
        function Submit() {
                    showMsg();
                    return false;
        }


        //判断表单是否验证正确方法
        function showMsg(){
            /* 数字/字母/下划线(5-10位)+@+字母/数字(2-5位)+”.”+com*/
            var email=/^\w{5,10}\@[0-9a-z]{2,5}\.[c,o,m]{3}$/;
            if(txt[0].value.match(email)==null){
                errorshow(0,"请输入正确的邮箱地址",false);

            }else {
                errorshow(0,"",true);
            }
            /*邮箱验证码：6位纯数字验证码*/
            var id_e=/^\d{6}$/;
            if(txt[1].value==""){
                errorshow(1,"请输入邮件中的6位验证码",false)
            }else {
                if(txt[1].value.match(id_e)==null){
                    errorshow(1,"验证码应为6位数字",false)
                }else {
                    errorshow(1,"",true)
                }
            }

            /*字母、数字或者英文符号，最短8位，区分大小写*/
            var password=/^[0-9a-zA-Z.,;'/]{8,}$/;
            if(txt[2].value==""){
                errorshow(2,"请填写密码",false)
            }else {
                if(txt[2].value.match(password)==null){
                    errorshow(2,"密码长度不足8位",false)
                }else {
                    errorshow(2,"",true)
                }
            }

            /*确认密码*/
            if(txt[2].value.match(password)==null){
                errorshow(3,"请再次输入新密码",false)
            }else {
                if(txt[2].value!=txt[3].value){
                    errorshow(3,"两次输入的密码不一致",false)
                }else {
                    errorshow(3,"",true)
                }
            }
        }

        //错误提示函数
        function errorshow(num,str,res){
            //尝试获取错误提示
            var error=txt[num].parentNode.getElementsByClassName("error")[0];
            if(res){ //res==true
                if(error!=undefined){
                    if(error.length!=0){
                        error.remove();
                    }
                    return;
                }
            }
            else{ //res==false
                if(error!=undefined){ //同一输入行多种错误提示切换
                    error.innerHTML=str;
                }else{
                    /*创建错误提示*/
                    var err=document.createElement("span");
                    err.className="error";
                    err.innerHTML=str;
                    txt[num].parentNode.appendChild(err);
                }
            }
        }
</script>
</body>
</html>

蕙惠子

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
二十四、form 表单验证+简单注册正则表达式

一、知识点1.JavaScript正则表达式：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。（搜索模式可用于文本搜索和文本替换）2.正则表达式概念：由一个字符序列形成的搜索模式；3.语法：var 名称=/正则表达式主体/;4.字符串方法：search()方法用于检索字符串中指定的子字符串或与正则表达式相匹配的子字符串，并返回子字符串的起始位置；replace()方法用于在字...
复制链接

扫一扫