javaweb简易表单验证

一缕叶

于 2024-11-29 12:37:31 发布

阅读量94

点赞数 2

分类专栏： javaweb 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/kmvmy/article/details/144133017

版权

javaweb 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id ="reg_form" action="#"  method ="get">
        <table>
            <tr>
                <td>用户名</td>
                <td class ="inputs">
                    <input name="username" type="text" id="username">
                    <br>

                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>


                </td>

            </tr>
            <tr>
                <td>密码</td>
                <td class ="inputs">
                    <input name="password" type="password" id="password">
                    <br>

                    <span id="password_err" class="err_msg" style="display: none">密码不太受欢迎</span>

                </td>

            </tr>
            <tr>
                <td>手机号</td>
                <td class ="inputs">
                    <input name="tel" type="text" id="tel">
                    <br>

                    <span id="tel_err" class="err_msg" style="display: none">手机号码不太受欢迎</span>


                </td>

            </tr>


        </table>
        <input value="注册" type="submit" id="reg_btn">

    </form>



<script>


 var usernameInput =document.getElementById("username");
    usernameInput.onblur=checkName;
        function checkName() {
    var username=usernameInput.value.trim()
    var flag=username.length>=6&&username.length<=12
    if(flag){
        document.getElementById("username_err").style.display='none'

    }
    else{
        document.getElementById("username_err").style.display=''

    }
    return flag;

}
 var passwordInput =document.getElementById("password");
 passwordInput.onblur=checkPassword;
     function checkPassword() {
     var password=passwordInput.value.trim();
         var flag=password.length>=6&&password.length<=12
     if(flag){
         document.getElementById("password_err").style.display='none';

     }
     else{
         document.getElementById("password_err").style.display='';

     }

         return flag;
 }


 var telInput =document.getElementById("tel");
 telInput.onblur=checkTel;
     function checkTel() {
     var tel=telInput.value.trim();
         var flag= tel.length==11
     if(flag){
         document.getElementById("tel_err").style.display='none';

     }
     else{
         document.getElementById("tel_err").style.display='';

     }

         return flag;
 }

var regForm =document.getElementById("reg_form")
    regForm.onsubmit=function () {
    var i=checkTel()&&checkName()&&checkPassword();
    return i;
    }
</script>

</body>
</html>

黑马javaweb82集