JS——正则表达式应用 12306注册界面_使用正则表达式制作注册页面提示特效-CSDN博客

本文链接：https://blog.csdn.net/weixin_52148548/article/details/123034768
当输入的值不符合正则表达式时出现提示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    form{
        height: 900px; ;
        width: 1200px; ;
        box-sizing: border-box;
        margin: auto;   
    }
    .bigbox{
        border: steelblue 4px solid;
        border-radius: 5px;
        margin-top: 0px;
    }
    .smallbox{
        height:30px;
        width:100%;
        padding:0px;
        margin: 0px;
    }
    .span1{
        color: black;
        font-weight: bold;
    }
    .span2{
        color: slategrey;
    }
    .bigbox-top{
        background-color: steelblue ;
        color: white;
        height:30px ;
        line-height: 30px;/*使文字水平居中*/
        width: 100%;
        border-radius: 5px;
        padding:0px;
        margin: 0px;
        
    }
    .bigbox-bottom{
        height: 840px;
        text-align: center;
    }
    .span-left{
        display:inline-block;/*因为span是行内元素直接设置宽高是无效的，所以先将span设置为行内快捷元素，然后可以设置宽高*/
        width:200px;
        text-align: right;
    }
    .span-right{
        display: inline-block;
        width: 500px;
        text-align: left;
        color: rgb(250, 130, 50);
    }
    input{
        width: 200px;
        height: 30px;
        border: 2px,solid,(black, white); 
        text-align: left;
    }
    a{
        text-decoration: none;
        color: steelblue;
        font-size:18px;
    }
    div{
        margin-top: 20px;
    }
    p{
        color: red;
    }    
   
</style>
<body>
    <form>
        <div class="smallbox">
            <span class="span1">您现在的位置:</span>
            <span class="span2">客运首页>注册</span>
        </div>
        <div class="bigbox">
            <div class="bigbox-top">
                账户信息
            </div>
            <div class="bigbox-bottom">
                <div>
                    <span class="span-left">用户名:</span>
                    <input id="input1" type="text" placeholder="用户名设置成功后不可修改">
                    <span class="span-right">6-30位字母、数字或"_"，字母开头</span>
                    <p id="error1" style="display: none;"></p>
                    
                </div>
                <div>
                    <span class="span-left">登录密码:</span>
                    <input id="input2" type="text" placeholder="6-20位字母、数字或符号">
                    <span class="span-right"></span>
                    <p id="error2" style="display: none;"></p>  
                   
                </div>
                <div>
                    <span class="span-left">确认密码:</span>
                    <input id="input3" type="text" placeholder="再次输入您的登陆密码">
                    <span class="span-right"></span>
                    <p id="error3" style="display: none;"></p> 

                </div>
                <div>
                    <span class="span-left">证件类型:</span>
                    <select style="width: 200px;height: 30px; border:2px ,solid,(black, white);">
                        <option>台湾居民来往大陆通行证</option>
                    </select>
                    <span class="span-right">证件填写规则</span>
                </div>
                <div>
                    <span class="span-left">姓名:</span>
                    <input type="text" placeholder="请输入证件上的中文姓名">
                    <span class="span-right">(用于身份核验，请正确填写)</span>
                </div>
                <div>
                    <span class="span-left">证件号码:</span>
                    <input id="input4" type="text" placeholder="请输入您的证件号码">
                    <span class="span-right">(用于身份核验，请正确填写)</span>
                    <p id="error4" style="display: none;">请正确输入18位的身份证号码!</p> 
                </div>
                <div>
                    <span class="span-left">证件有效期截止日期:</span>
                    <input type="text">
                    <span class="span-right">(用于身份核验，请正确填写)</span>
                </div>
                <div>
                    <span class="span-left">出生日期:</span>
                    <input type="text">
                    <span class="span-right">(用于身份核验，请正确填写)</span>
                </div>
                <div>
                    <span class="span-left">姓别:</span>
                    <input  type="radio" style=" font: size 12px;vertical-align:middle;margin-top:0px;width:80px; border-radius: 20px;" name="sex"/>男
                    <input  type="radio" style=" font: size 12px;vertical-align:middle;margin-top:0px;width:80px; border-radius: 20px;" name="sex"/>女
                    <span class="span-right"></span>
                </div>
                <div>
                    <span class="span-left">邮箱:</span>
                    <input id="input5" type="text" placeholder="请正确填写邮箱地址">
                    <span class="span-right"></span>
                    <p id="error5" style="display: none;">请输入有效的电子邮件地址!</p> 
                </div>
                <div>
                    <span class="span-left">手机号码（+86）:</span>
                    <input id="input6" type="text" placeholder="请输入您的手机号">
                    <span class="span-right">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
                    <p id="error6" style="display: none;">您输入的手机号码不是有效的格式!</p> 
                </div>
                <div>
                    <span class="span-left">旅客类型:</span>
                   <select style="width: 200px;height: 30px; border:2px ,solid,(black, white);">
                       <option>成人</option>
                   </select> 
                   <span class="span-right"></span>
                </div>
                <div style="text-align: right;margin-right: 200px;">
                    <input type="checkbox" checked style="display:line-block;height: 20px;width:50px">
                    <span>
                        我已阅读并同意遵守
                        <a href="#">《中国铁路客户服务中心网站服务条款》  《隐私权政策》</a>
                    </span>
                </div></br></br>
                <div >
                    <input type="submit" value="下一步" style="text-align:center;height:40px;width: 150px;color:white;background-color: tomato;border-radius: 5px;border-color:tomato ;">
                </div>
            </div>
        </div>
    </form>

    <script>
        let input1=document.querySelector('#input1')
        input1.onblur=function(){
            let reg1=/^[a-zA-Z](\w|_){5,29}$/i
            let value1=this.value;//获取当前节点的value属性的值
            let p1=document.querySelector('#error1')
           
            if(value1.trim().length==0){
                p1.innerText='用户名不能为空!'
                p1.style.display='block'
                return
            }
            if(value1.trim().length>0&&value1.trim().length<6){
                p1.innerHTML='用户名长度不能小于6个字符!'
                p1.style.display='block'
                return
            }
            if(!reg1.test(value1)){
                p1.innerText='用户名只能由30位字母，数字和_组成，须以字母开头!'
                p1.style.display='block'
                return
            }
        }

        let input2=document.querySelector('#input2')
        input2.onblur=function(){
            let reg2=/(\w|_|\.){6,20}$/
            let value2=this.value
            let p2=document.querySelector('#error2')
            if(value2.trim().length==0){
                p2.innerText='密码不能为空!'
                p2.style.display='block'
                return
            }
            if(value2.trim().length>0 && value2.trim().length<6){
                p2.innerHTML='密码长度不能小于6个字符!'
                p2.style.display='block'
                return
            }
            if(!reg2.test(value2)){
                p2.innerText='注意，登陆密码为6-20位数字字母或符号!'
                p2.style.display='block'
                return
            }
        }
        
        let value2=input2.value
        let input3=document.querySelector('#input3')
        input3.onblur=function(){
            let value3=this.value
            let p3=document.querySelector('#error3')
            if(!value3==value2){
                p3.innerText='确认密码与密码不同!'
                p3.style.display='block'
                return
            }
        }

        let input4=document.querySelector('#input4')
        input4.onblur=function(){
            let reg4=/^\d{17}(0-9|x)$/
            let value4=this.value
            let p4=document.querySelector('#error4')

            if(!reg4.test(value4)){
                p4.innerText='请输入正确的18位身份证号码'
                p4.style.display='block'
                return
            }
        }

        let input5=document.querySelector('#input5')
        input5.onblur=function(){
            let reg5=/^\w{8}(@)(qq|gmail|126|163|hotmail|263|21\.cn|yahoo|live|sihu|sina)\.(com|com\.cn)$/
            let value5=this.value
            let p5=document.querySelector('#error5')

            if(!reg5.test(value5)){
                p5.innerText='请输入正确的电子邮箱地址'
                p5.style.display='block'
                return
            }
        }

        let input6=document.querySelector('#input6')
        input6.onblur=function(){
            let reg6=/^1[3|4|5|6|8|7]\d{9}$/
            let value6=this.value
            let p6=document.querySelector('#error6')

            if(!reg6.test(value6)){
                p6.innerText='您输入的手机号码不是有效格式!'
                p6.style.display='block'
                return
            }
        }

    </script>
</body>
</html>
<!-- border-radius:5px使边框四个角变圆滑 -->
<!-- vertical-align:middle;margin-top:0px;使单选框和文字在同一水平线上 -->