2019.02.27(java前端,js)

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>

猜你喜欢

转载自blog.csdn.net/qq_34191426/article/details/88036497