js基础应用篇 - 正则验证

最新推荐文章于 2024-07-03 19:55:00 发布

470368525

最新推荐文章于 2024-07-03 19:55:00 发布

阅读量508

点赞数

分类专栏： javascript 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_45217584/article/details/94635716

版权

javascript 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

正则，按图示进行页面布局，按提示进行正则验证

在这里插入图片描述

这个内容有些稍微变化，不是按照原图，比如最小/最大值，最小/最大长度，没有写；
最后的提交按钮只做了提示处理，表单内容全部正确才可以点击提交没有设置

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            margin: 0 auto;
            width: 650px;
            height: 400px;
            line-height: 45px;
        }
        #box label{
            display: inline-block;
            width: 120px;
        }
        #box input{
            line-height: 30px;
            height: 30px;
            width: 300px;
            outline: none;
        }
        #box #btn{
            width: 80px;
            line-height: 30px;
            height: 30px;
            margin-top: 40px;
            background: #0a8cd2;
            color: #fff;
        }
        #box span{
            display: inline-block;
            line-height: 30px;
            height: 30px;
            border-radius: 5px;
            background-color: #dedede;
            font-size: 12px;
            color: #ff172e;
        }

    </style>
    <script>
        window.onload  = function () {
           let isusername = false;
           let ispsd = false;
           let isconfirmPsd = false;
           let isphone = false;
           let ismail = false;
           let isID = false;

           let username =  document.getElementById('username');
           let psd = document.getElementById('psd');
           let confirmPsd = document.getElementById('confirmPsd');
           let phone = document.getElementById('phone');
           let mail = document.getElementById('mail');
           let ID = document.getElementById('ID');



           // 用户名
           username.oninput = function () {
               let Reg  = /^[A-z]\w{6,16}$/;
               if(Reg.test(this.value)){
                   isusername = true;
                   this.nextElementSibling.innerHTML = '&nbsp;&nbsp;格式正确&nbsp;&nbsp;'
               } else{
                   isusername = false;
                   this.nextElementSibling.innerHTML = '&nbsp;&nbsp;只能以字母开头，6-16位数字和下划线组成&nbsp;&nbsp;'
               }
           };
            // 用户名不能为空
            isNull(username)

           // 密码框
           psd.oninput = function () {
               let Reg = /^.{6,16}$/
               if(Reg.test(this.value)){
                   ispsd = true;
                   this.nextElementSibling.innerHTML='&nbsp;&nbsp;格式正确&nbsp;&nbsp;';
                   confirmPsd.disabled = false;
               }else{
                   ispsd = false;
                   this.nextElementSibling.innerHTML='&nbsp;&nbsp;除了换行符之外的6-16位字符&nbsp;&nbsp;';
                   confirmPsd.disabled = true;
               }
           } ;
            // 密码不能为空
            isNull(psd);


            // 确认密码框
            confirmPsd.oninput = function () {
                let Reg = /^.{6,16}$/
                if(this.value ==  psd.value){
                    isconfirmPsd  = true;
                    this.nextElementSibling.innerHTML='&nbsp;&nbsp;格式正确&nbsp;&nbsp;';
                }else{
                    isconfirmPsd  = false;
                    this.nextElementSibling.innerHTML='&nbsp;&nbsp;两次密码输入不一致&nbsp;&nbsp;';
                }
            } ;
            // 确认密码不能为空
            isNull(confirmPsd);

            // 手机号输入框
            phone.oninput = function () {
                let Reg = /^1[345789]\d{9}$/;
                if(Reg.test(this.value)){
                    isphone = true;
                    this.nextElementSibling.innerHTML='&nbsp;&nbsp;格式正确&nbsp;&nbsp;';
                }else{
                    isphone = false;
                    this.nextElementSibling.innerHTML='&nbsp;&nbsp;请输入有效的手机号码&nbsp;&nbsp;';
                }
            };
            // 手机号不能为空
            isNull(phone);


           // 邮箱输入
           mail.oninput = function () {
               let Reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
               if(Reg.test(this.value)){
                   ismail = true;
                   this.nextElementSibling.innerHTML='&nbsp;&nbsp;格式正确&nbsp;&nbsp;';
               }else{
                   ismail = false;
                   this.nextElementSibling.innerHTML='&nbsp;&nbsp;请输入规则的电子邮箱&nbsp;&nbsp;';
               }
           };
            // 邮箱不能为空
            isNull(mail);


            // 身份证输入
            ID.oninput = function () {
                let Reg = /^\d{15}(\d{2}[A-Za-z0-9])?$/;
                if(Reg.test(this.value)){
                    isID = true;
                    this.nextElementSibling.innerHTML='&nbsp;&nbsp;格式正确&nbsp;&nbsp;';
                }else{
                    isID = false;
                    this.nextElementSibling.innerHTML='&nbsp;&nbsp;请输入有效的身份证号&nbsp;&nbsp;';
                }
            };
            // ID不能为空
            isNull(ID);




            btn.onclick = function () {
                if ( isusername && ispsd && isconfirmPsd && phone && ismail && isID) {
                    btn.nextElementSibling.innerHTML = '&nbsp;&nbsp;提交成功&nbsp;&nbsp;'
                } else {
                    btn.nextElementSibling.innerHTML = '&nbsp;&nbsp;参数不完整,不能提交&nbsp;&nbsp;'
                }
            }



            // 参数是否为空
            function isNull(obj) {
                obj.onblur = function () {
                    if (obj.value == ""){
                        isobj = false;
                        this.nextElementSibling.innerHTML = '&nbsp;&nbsp;参数不能为空&nbsp;&nbsp;'
                    }
                };
            }

         };
    </script>
</head>
<body>
<div id="box">
    <form action="#" id="form">
        <caption>表单验证</caption><br>

        <label for="username"> 用户名：</label>
        <input type="text" id="username">
        <span></span>
        <br>

        <label for="psd"> 密码：</label>
        <input type="password" id="psd">
        <span></span>
        <br>

        <label for="confirmPsd"> 确认密码：</label>
        <input type="password" id="confirmPsd" disabled = "">
        <span></span>
        <br>

        <label for="phone"> 手机：</label>
        <input type="text" id="phone">
        <span></span>
        <br>

        <label for="mail"> 邮箱：</label>
        <input type="mail" id="mail">
        <span></span>
        <br>

        <label for="ID"> 身份证：</label>
        <input type="text" id="ID">
        <span></span>
        <br>

        <input type="button" value="提交" id="btn" >
        <span></span>


    </form>
</div>


<script>



</script>
</body>
</html>