您的位置：首页 > Web前端 > JavaScript

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

2017-01-14 17:34 721 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML JavaScript

相关文章推荐

新的分享

章节导航