JavaScript正则表达式账号密码验证练习-CFANZ编程社区

JavaScript正则表达式账号密码验证练习

alonwang 2022-04-21 阅读 57

<style>
        .app{
            width: 400px;
            height: 400px;
            border: 5px solid yellow;
            margin: auto;
            text-align: center;
        }
        p{
            color: red;
            font-size: 12px;
        }
       

    </style>
</head>
<body>
    <!--  -->
    <div class="app">
    <h2>注册</h2>
    <!-- 账号 -->
    <div>
        账号：<input type="text" value="" id="txt">
        <p id="error">&nbsp;</p>
    </div>
    <!-- 密码 -->
    <div>
        密码：<input type="password" id="pas" value="">
        <p id="error1">&nbsp;</p>
    </div>
    <!-- 手机号 -->
    <div>
        手机号：<input type="text" id="txt2" value="">
        <p id="error2">&nbsp;</p>
    </div>
    <!-- 按钮 -->
    <button type="submit" id="but">提交</button>
    </div>

js部分

<script>
    // 获取元素
    var otxt=document.getElementById("txt")
    var opas=document.getElementById("pas")
    var otxt2=document.getElementById("txt2")
    var obut=document.getElementById("but")
    var oerr=document.getElementById("error")
    var oerr1=document.getElementById("error1")
    var oerr2=document.getElementById("error2")
    // 定义正则表达式
    var atxt=/[0-9]{3,6}/
     var apas=/[0-9]{3,6}/
     var atxt2=/[0-9]{11}/
    //  点击提交按钮事件
    obut.onclick=function(){
        // 判断是否符合正则表达式条件
        if(atxt.test(otxt.value)){
           oerr.innerHTML=" ";
        }else{
            oerr.innerHTML="错误";
        }
        if(apas.test(opas.value)){
           oerr1.innerHTML=" ";
        }else{
            oerr1.innerHTML="错误";
        }
        if(atxt2.test(otxt2.value)){
           oerr2.innerHTML=" ";
        }else{
            oerr2.innerHTML="错误";
        }
    }
</script>

效果图

0 条评论