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

最新推荐文章于 2024-07-09 17:01:34 发布

forguy10

最新推荐文章于 2024-07-09 17:01:34 发布

阅读量944

点赞数 1

分类专栏： HTML JavaScript 文章标签： HTML JavaScript

本文链接：https://blog.csdn.net/forguy10/article/details/54427820

版权

HTML 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

<!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" οnblur="usernameCheck(this);" autofocus>
       <span id="username"></span>
       <br/>

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

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

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