一个简单的HTML表单及JavaScript验证

2017-01-14 19:49:44来源:CSDN作者:forguy10人点击

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <script type="text/javascript">
        var username;
        var password;
        var email;
        var emailName;
        function usernameCheck(){
            username = document.getElementsByName("username")[0].value;
            var nameSpan = document.getElementById("username");
            var testExp = /(test)/gi;
            if(username.length < 4 || username.length > 10){
                nameSpan.innerHTML = "最小长度是4位,最大长度是10位";
            }
            else if(testExp.test(username)){
                nameSpan.innerHTML = "输入用户名不能包含test";
            }
            else{
                nameSpan.innerHTML = "";
            }
        }

        function passwordCheck(){
            password = document.getElementsByName("password")[0].value;
            var passwordSpan = document.getElementById("password");
            if(password.length < 4 || password.length > 10){                
                passwordSpan.innerHTML = "最小长度是4位,最大长度是10位";    
            }
            else{
                passwordSpan.innerHTML = "";
            }
        }

        function getEmail(){
            var emailSpan = document.getElementById("email");
            email = document.getElementsByName("email")[0].value;
            emailName = email.split("@")[0];
            emailSpan.innerHTML = emailName;
        }

        function final(){
            alert(username+"+"+password+"+"+email+"+"+emailName);
        }
    </script>
</head>
<body>
    <form method="post">
        <label for="username">用户名:</label>
        <input type="text" name="username" minlength="4" maxlength="10" onblur="usernameCheck(this);" autofocus>
        <span id="username"></span>
        <br/>

        <label for="password">密码:</label>
        <input type="password" name="password" minlength="4" maxlength="10" onblur="passwordCheck(this);">
        <span id="password"></span>
        <br/>

        <label for="email">邮箱:</label>
        <input type="text" name="email" onblur="getEmail(this);">
        <span id="email"></span>
        <br/>

        <input type="button" value="提交" onclick="final();">
    </form>
</body>
</html>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台