JavaScript（三十四）正则表达式+表单验证demo

最新推荐文章于 2020-07-02 20:01:44 发布
最新推荐文章于 2020-07-02 20:01:44 发布
阅读量251 收藏
点赞数
分类专栏： JavaScript 文章标签： 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/We_jia/article/details/87892561
版权

正则表达式知识点

效果图展示

采用的是正则表达式进行判断的一次性表单验证，点击注册以后才会判断格式是否都正确！

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/iconfont.css"/>
    <style>
        #formuser {
            display: block;
            margin: 0 auto;
            width: 400px;
        }

        .form_user > li {
            list-style: none;
            height: 50px;
            width: 400px;
            border: 1px solid silver;
            border-radius: 5px;
            position: relative;
            margin: 40px 0;
        }

        .form_user > li.litxt > input {
            margin-left: 1px;
            width: 378px;
            height: 48px;
            border-style: none;
            outline: none;
            font-size: 20px;
            color: black;
            padding-left: 20px;

        }

        .tel {
            position: relative;
            border-style: none !important;
        }

        .usertelno {
            width: 150px;
            height: 50px;
            border: 1px solid silver;
            border-radius: 5px;
            line-height: 50px;
            position: relative;
            float: left;
        }

        .usertelno > input {
            position: absolute;
            top: 0;
            left: 1px;
            width: 120px;
            height: 48px;
            padding-left: 20px;
            border-style: none;
            font-size: 20px;
            outline: none;
        }

        #icon {
            position: absolute;
            right: 10px;
            top: 0;
            z-index: 2;
            color: gray;
        }

        .ph {
            float: right;
            width: 210px;
            height: 50px;
            border-radius: 5px;
            border: 1px solid silver;
            font-size: 20px;
            padding-left: 20px;
            outline: none;
        }

        .btn > input {
            width: 400px;
            height: 50px;
            outline: none;
            border-style: none;
            background-color: transparent;
            color: white;
            font-size: 22px;
        }

        .btn {
            background-color: #2e7fff;
        }

        .btn:hover {
            background-color: #40a6ff;
        }

        .telerror {
            clear: left;
            display: block;
            font-size: 14px;
            color: gray;
            position: relative;
            top: 5px;
        }

        .emailshow {
            display: block;
            font-size: 14px;
            color: gray !important;
            position: absolute;
            top: 53px;
        }

        .error {
            font-size: 14px;
            color: red;
            position: absolute;
            top: 53px;
            left: 0;
            background-image: url("./img/error@2x.png");
            background-repeat: no-repeat;
            background-size: 20px;
            padding-left: 25px;
        }

        .success {
            display: none;
            position: absolute;
            top: 15px;
            right: 10px;
        }
    </style>
</head>
<body>
<form id="formuser" action="" method="get">
    <ul class="form_user">
        <li class="litxt">
            <input type="text" class="userData" name="email" placeholder="邮箱" value=""/>
            <span class="emailshow">请输入你常用的邮箱（非qq/foxmail邮箱）</span>
            <img class="success" src="./img/tick.png" alt=""/>
        </li>
        <li class="litxt">
            <input type="text" class="userData" name="nickname" placeholder="昵称" value=""/>
            <img class="success" src="./img/tick.png" alt=""/>
        </li>
        <li class="litxt">
            <input type="password" class="userData" name="password" placeholder="密码" value=""/>
            <img class="success" src="./img/tick.png" alt=""/>
        </li>
        <li class="tel">
            <div class="usertelno">
                <input id="telnum" type="text" value="+86"/>
                <i id="icon" class=" iconfont">&#xf01a6;</i>
            </div>
            <input class="ph" placeholder="手机号码" type="text"/>
            <span class="telerror">可通过该手机号找回密码</span>
        </li>
        <li class="btn"><input type="submit" value="立即注册"/></li>
    </ul>
</form>

<script>
    var emailshow = document.getElementsByClassName("emailshow")[0];
    var formuser = document.getElementById("formuser");
    var userData = document.getElementsByClassName("userData");
    var litxt = document.getElementsByClassName("litxt");
    var success = document.getElementsByClassName("success");

    var errorinfo = [
        {
            name: "邮箱",
            error: [
                {info: "邮箱不能为空！"},
                {info: "邮箱格式不正确！"}
            ]
        },
        {
            name: "昵称",
            error: [
                {info: "昵称不能为空！"}
            ]
        },
        {
            name: "密码",
            error: [
                {info: "密码不能为空！"},
                {info: "密码必须包含数字和字母"},
                {info: "密码必须在6-8位！"}
            ]
        }
    ];
    formuser.onsubmit = function () {
        emailshow.style.display = "none";
        for (var i = 0; i < userData.length; i++) {
            if (userData[i].value.match(/./) == null) {
                addEvent("error", i, 0);
            }
            else {
                //不为0  判断格式
                if (i == 0) {
                    var emailReg = /^[A-Za-z\d]+([-_.][a-zA-Z\d]+)*@([a-zA-Z\d]+[.])+[a-zA-Z\d]{2,4}$/;
                    if (userData[i].value.match(emailReg)) {
                        success[i].style.display = "block";
                        addEvent("success", i, null);
                    }
                    else {
                        addEvent("error", i, 1);
                    }
                }
                if (i == 1) {
                    success[i].style.display = "block";
                    addEvent("success", i, null);
                }
                if (i == 2) {
                    if (userData[i].value.length >= 6 && userData[i].value.length <= 8) {

                        var pwd=/^([a-zA-Z_]+(\d)+[A-Za-z0-9]*)|((\d)+[a-zA-Z_]+([A-Za-z0-9]*))$/;
                        //以字母或下划线开头，必须要有数字或 以数字开头 必须有字母或下划线
//                        var pwd = /^(([a-zA-Z_])+(\d)+([a-zA-Z0-9]*))+|((\d)+([a-zA-Z_])+([a-zA-Z0-9]*))$/;
                        if (userData[i].value.match(pwd)) {
                            success[i].style.display = "block";
                            addEvent("success", i, null);
                        }
                        else {
                            addEvent("error", i, 1);
                        }
                    }
                    else {
                        addEvent("error", i, 2);
                    }

                }
            }
        }
        var len = document.getElementsByClassName("error").length;
        if (len) {
            return false;
        }
        return true;
    }


    function addEvent(res, index, num) {
        if (litxt[index].lastElementChild.className == "error") {
            litxt[index].lastElementChild.remove();
        }
        if (res == "error") {
            success[index].style.display = "none";
            var span = document.createElement("span");
            span.className = "error";
            span.innerHTML = errorinfo[index].error[num].info;
            litxt[index].appendChild(span);
        }
    }
</script>
</body>
</html>

 

We_jia
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表单验证（实时判断）
ICY___的博客
01-27 2081
上次的正则版表单验证的主要用意是为了正则表达式的应用，而这次的表单验证提供的更加完善的用户体验（实时判断了用户的输入数据正确与否），它是上个版本的延伸。 实现效果： 相应代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;!-- 此表单虽然样式比较简单，但功能实现还是比较复杂的，不同于一般的一步性验证而是将分步验证和最终验证结合在一...
input表单验证，正则表达式
love_yourself_ok的博客
11-23 438
表单验证 js //判断输入的文本是否为中英文 function language(obj) { var text = $(obj).val(); var reg = /^[\u4e00-\u9fa5a-zA-Z]+$/; $(obj).nextAll("span.tip_text").remove(); if(text == "") { $(obj).nextAll("span.tip_text").remove(); }else if(!(reg
常用正则表达式集锦 js常用正则验证
03-31
常用js正则表达式 开发必备 只能输入数字：“^[0-9]*$” 只能输入n位的数字：“^\d{n}$” 只能输入至少n位数字：“^\d{n,}$” 只能输入m-n位的数字：“^\d{m,n}$” 只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$” 只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”
js正则做表单验证实例
babybk的博客
04-27 1322
<!DOCTYPE HTML> <html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta name="Author" content="潭州学院-阿飞老师"> <style type='text/css'>
关于表单验证中常见的正则表达式以及写一个表单验证
shixiao_baia的博客
03-14 579
关于表单验证中常见的语法数量词有： x?: 当前x字符出现0次或1次 x+：当前x字符出现一次或多次 x*:当前x字符0次或多次 x{n}:当前x字符恰好出现n次 x{n,}:当前x字符至少出现n次 x{n,m}:当前x字符至少n次但不超过m次 【a-zA-Z0-9】:不区分大小写字母，数字字符 在js中如何定义一个正则： var 变量名(reg)=/中间书写正则语法/； 使用正则表达式中的内置方...
jq非空验证，js正则表达式验证邮箱和手机号码
05-22
JavaScript正则表达式是用于匹配字符串模式的强大工具。在验证邮箱和手机号码时，我们需要创建符合特定规则的正则表达式。对于邮箱验证，通常的正则表达式如下： ```javascript var emailRegex = /^[a-zA-Z0-9._%...
JS 表单验证的15个正则表达式
04-24
在这篇博客"JS 表单验证的15个正则表达式"中，作者分享了一些常用的正则表达式，帮助开发者实现更高效、准确的表单验证。 1. 邮箱验证： `/^[\w.-]+@[\w-]+(\.[\w-]+)+$/` 这个正则确保邮箱地址格式正确，包含字母...
JS利用正则表达式实现简单的密码强弱判断实例
10-19
在JavaScript中，正则表达式是一种强大的工具，用于匹配、查找、替换字符串中的特定模式。在本文中，我们将探讨如何使用正则表达式来实现一个简单的密码强度判断功能。这个功能将检查用户输入的密码是否符合特定的...
JS 正则验证表单
05-01
通过以上讨论，我们可以看到JavaScript正则表达式在表单验证中的强大作用。理解并熟练掌握正则表达式的使用，不仅能够提高我们的编程效率，还能确保应用程序的数据质量，从而为用户提供更好的体验。在实际开发中，...
AngularJs demo 例子（表单验证) form
08-31
除了内置的验证规则，还可以通过`ng-pattern`指令使用正则表达式自定义验证，或者编写自定义验证指令。自定义验证指令通常会通过`require: '^ngModel'`来获取关联的`ngModelController`，并在`link`函数中添加验证...
JavaScript正则表达式
奈何师兄的博客
07-25 286
onsubmit="return fun1()"> 学生信息管理 学生编号：(8位数字) 学生名字：(中文) 邮箱地址： 电话号码： /*是否带有小数*/ function isDecimal(s
应用正则表达式验证用户注册信息(上)
Sean's Technology Blog
08-27 4642
首先建立一个javascript文件，包函以下正则表达式判断函数： function checkregtel(regtel){ //验证手机号码 var str=regtel; //参数传递手机号码变量 var Expression=/^13(
js正则表达式校验实例
qq_37167515的博客
05-06 4143
js正则表达式校验实例 在学习正则表达式的时候遇到一些别人总结好的校验实例，笔记本上总结太多，放在此以便查看： /*是否带有小数*/ function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } /*校验是否中文名称组成 */ fu...
正则表达式验证表单
banliyou9765的博客
08-29 249
正则是用来描述字符规则的，常常用来做表单验证。先说下正则的创建和简单的使用吧！ / / 是正则表达式的标识符 创建 字面量创建　　 var reg=/a/; 构造函数创建　　var reg=new RegExp("a"); 使用：不能直接使用，需配合方法使用 字符： 　　　　str.match(reg) 　　　　str.replace(reg) ...
前端 —— JavaScript 基础篇 22 -- 比较全的正则验证（注册页面的demo）
宁静致远
07-02 270
注册页面中用到的正则校验，在提交表单的时候。方便自己后期复制粘贴 。若是能帮助有需要的伙伴，那再好不过。 css文件 .padb{ padding: 30px 50px; } .conBox{ background: #fff; padding: 0 40px 30px 40px; } .title{ height: 50px; line-height: 50px; border-bottom:1px solid #CCC; } .title span{ width: 70px; h
JavaScript 正则表达式实现表单验证
weixin_46390620的博客
03-11 342
表单验证 效果图： 输入格式正确： 输入格式错误： 基本代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表单验证</title> <style type="text/css"> input{ ma...
js正则校验
houjx3的博客
06-14 763
&lt;script type="text/javascript"&gt; function SubmitCk() { var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if (!reg.test($("#txtEmail").val()...
js 正则 demo
Rand Tsui
05-25 1177
/* js正则表达式有三种使用方法 第一种：使用 RegExp 对象 var rgx = new RegExp("[a-z]"); 第二种：使用 双斜杠 // var rgx = /[a-z]/; //与上面的写法等价 第三种：使用字符串 String 对象的方法
JavaScript(二十一）淘宝购物车demo
We_jia的博客
03-07 1382
效果图展示 思路分析 本案例有一个重要的知识点就是索引对索引 通过搭建桥梁 1.实现点击按钮框 2.实现商品数量的加减 3.算每一件商品的总金额 小数点 保留俩位 ().toFixed (2) 4.算所有选中商品的总金额以及点+ -时的总金额 5.只选某几个商品的总金额 加单独事件 6.处理全选的问题 7.已选商品个数 HTML代码 &lt;!DOCTYPE...
JavaScript（三十七）阻止表单的默认提交事件
We_jia的博客
04-12 1213
一、将input 标签的type属性从type="submit"改为type=“button” 二、将input标签改为button标签 三、在事件中添加event.preventDefault() 四、用onclick点击事件来return false 注意是onclick内是return func();而不是简单的调用func()函数 <!DOCTYPE html>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值