js的表单验证器

米柴

已于 2022-07-01 21:31:57 修改

阅读量181

点赞数

文章标签： javascript 前端开发语言

于 2022-07-01 21:30:08 首次发布

本文链接：https://blog.csdn.net/weixin_48917089/article/details/125565939

版权

1. html代码

定义了文本框输入用户名，两个密码进行输入和确认，最后是邮箱输入，每个输入框后面紧跟一个span，进行输出提示信息。
在这里插入图片描述

 <style>
        input+span{
            color: red;
        }
    </style>
</head>
<body>
    <form action="" name="form1" method="post" onsubmit="return checkSubmit()">
        <p>
            用户名<input type="text" name="uname" id="uname"
            onfocus="hint('uname_hint','长度不能小于6位')" 
            onblur="cannel_hint('uname_hint')"
            onkeyup="checkName()"
            >
            <span id="uname_hint"></span>
        </p>
        <p>
            密码 <input type="password" name="upass" id="upass"
            onfocus="hint('upass_hint','长度不能小于6位')" 
            onblur="cannel_hint('upass_hint')"
            onkeyup="checkPass()"
            >
            <span id="upass_hint"></span>
        </p>
        <p>
            确认密码<input type="password" name="upass2" id="upass2"
            onfocus="hint('upass2_hint','两次密码要一致')" 
            onblur="cannel_hint('upass2_hint')"
            onkeyup="confirmPass()"
            >
            <span id="upass2_hint"></span>
        </p>
        <p>
            邮箱<input type="text" name="email" id="email"
            onfocus="hint('email_hint','输入为邮箱格式')" 
            onblur="cannel_hint('email_hint')"
            onkeyup="checkEmail()"
            >
            <span id="email_hint"></span>
        </p>
        <p>
            <input type="submit">
            
        </p>
    </form>
    </body>

2.js核心验证

hint()和cannel_hint()为鼠标focus和blus事件的输入提示信息，ele为当前input传入它后面的span的id。然后每个input增加keyUp事件，执行对应的check方法.最后checkSumbit方法来判断当前表单是否能提交。
在这里插入图片描述

 <script>
       
        //聚焦时提示输入
        function hint(ele,msg){
            let span=document.getElementById(ele);
            span.innerHTML=msg;
        }
        //取消聚焦取消提示
        function cannel_hint(ele){
            let span=document.getElementById(ele);
            span.innerHTML='';
        }
        //验证用户名
        function checkName(){
            let nameValue=document.getElementById("uname").value;
            let span=document.getElementById("uname_hint");
            if(nameValue.length<6){
                span.innerHTML="长度小于6";
                return false;
            }else{
                span.innerHTML="";
                return true;
            }
        }
        //验证密码
        function checkPass(){
            let passValue=document.getElementById("upass").value;
            let span=document.getElementById("upass_hint");
            if(passValue.length<6){
                span.innerHTML="长度小于6";
                return false;
            }else{
                span.innerHTML="";
                return true;
            }
        }
        //确认密码无误
        function confirmPass(){
            //获取输入的密码
            let passValue=document.getElementById("upass").value;
            let passValue2=document.getElementById("upass2").value;
            let span=document.getElementById("upass2_hint");
            if(passValue!=passValue2){
                span.innerHTML="密码不一致"
                return false;
            }else{
                span.innerHTML=""
                return true;
            }

        }
        //检查邮箱
        function checkEmail(){
            let reg=/[\w]+@[\w]+\.[\w]+$/;
            let eValue=document.getElementById("email").value;
            let span=document.getElementById("email_hint");
            if(!reg.test(eValue)){
                span.innerHTML="邮箱格式错误";
                return false;
            }else{
                span.innerHTML=""
                return true;
            }

        }
        //使用&保证每个方法执行到，而提交时输入对应的错误信息
        function checkSubmit(){
            if (checkName() & checkPass() & confirmPass() & checkEmail()){
                return true;
            }else{
                return false;
            }
        }


    </script>