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

来源：互联网发布：nginx server log配置编辑：程序博客网时间：2024/05/18 00:05

<!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>

1 0