Num.02-form表单前端验证

最新推荐文章于 2023-06-07 15:57:51 发布

码仆的逆袭

最新推荐文章于 2023-06-07 15:57:51 发布

阅读量182

点赞数

分类专栏： java-基础

本文链接：https://blog.csdn.net/qq_34191426/article/details/88036497

版权

java-基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

form表单前端验证

- form表单提交，前台数据正则校验

form表单提交，前台数据正则校验

提交事件：onsubmit
失去焦点事件：onblur

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var usernmaeIsHEFa=false;
            var passwordIsHeFa=false;
            var password2IsHeFa=false;
            var password = null;

            function checkPassword2(obj){
                var password2=document.getElementById("password2").value;
                if(password == password2){
                    password2IsHeFa=true;
                    document.getElementById("s3").innerHTML="√";
                }else{
                    document.getElementById("s3").innerHTML="×";
                }
            }
            function checkPassword(){
                var rePassword = /^[A-Za-z0-9]+$/;
                password = document.getElementById("password").value;
                if(rePassword.test(password)){
                    passwordIsHeFa=true;
                    document.getElementById("s2").innerHTML="√";
                }else{
                    document.getElementById("s2").innerHTML="×";
                }
            }
            function checkUserName(){
                var reUsername = /^[0-9]*$/;
                var username = document.getElementById("username").value;
                if(reUsername.test(username)){
                    usernmaeIsHEFa=true;
                    document.getElementById("s1").innerHTML="√";
                }else{
                    document.getElementById("s1").innerHTML="×";
                }
            }
            function checkForm(){
                if(usernmaeIsHEFa==true&&passwordIsHeFa==true&&password2IsHeFa==true){
                   return true; 
                }else{
                    alert("有数据不符合规范，请重新输入");
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <form action="#" onsubmit="return checkForm()">
            账号：<input type="text" name="username" id="username" onblur="checkUserName()"><span id="s1"></span><br>
            密码：<input type="password" name="password" id="password" onblur="checkPassword()"><span id="s2"></span><br>
            确认密码：<input type="password" name="password2" id="password2" onblur="checkPassword2(this)"><span id="s3"></span><br>
            年龄：<input type="text" name="age" id="age"><span id="s4"></span><br>
            <input type="submit">
        </form>
    </body>
</html>