表单验证之用户注册
| ? | <!DOCTYPE html> |
| ? | <html> |
| ? | <head> |
| ? | <meta charset="utf-8" /> |
| ? | <title></title> |
| ? | <script> |
| ? | ? |
| ? | var names = ["tom","jack","lily","韓梅梅"]; |
| ? | ? |
| ? | //表單驗證 |
| ? | function mySub(){ |
| ? | ? |
| ? | var userName = document.forms['myForm']['userName'].value; |
| ? | var pwd = document.forms['myForm']['pwd'].value; |
| ? | var tel = document.forms['myForm']['tel'].value; |
| ? | ? |
| ? | if(userName.length<3 || userName.length>6){ |
| ? | alert("用戶名必須為3-6位"); |
| ? | return false; |
| ? | } |
| ? | ? |
| ? | //判斷用戶名是否可用，面向對象的編程思想，原則：高內聚、低耦合 |
| ? | var b = isName(userName); |
| ? | if(b){ |
| ? | document.getElementById("isCan").innerHTML = "用戶名已存在"; |
| ? | return false; |
| ? | }else{ |
| ? | document.getElementById("isCan").innerHTML = ""; |
| ? | } |
| ? | ? |
| ? | //判斷用戶名是否重復，面向過程 |
| ? | // for(var i=0;i<names.length;i++){ |
| ? | // var n = names[i]; |
| ? | // if(n == userName){ |
| ? | // alert("用戶名已存在"); |
| ? | // return false; |
| ? | // } |
| ? | // } |
| ? | ? |
| ? | ? |
| ? | if(pwd.length<6){ |
| ? | alert("密碼必須大于6位"); |
| ? | return false; |
| ? | } |
| ? | ? |
| ? | return true; |
| ? | ? |
| ? | } |
| ? | ? |
| ? | //判斷用戶名，參數為判斷的用戶名 |
| ? | function isName(str){ |
| ? | for(var i=0;i<names.length;i++){ |
| ? | if(names[i] == str){ |
| ? | return true; |
| ? | } |
| ? | } |
| ? | ? |
| ? | return false; |
| ? | } |
| ? | ? |
| ? | </script> |
| ? | ? |
| ? | </head> |
| ? | <body > |
| ? | ? |
| ? | <h1>用戶注冊</h1> |
| ? | <span>規則：用戶名長度為3-6個字符</span> |
| ? | <hr /> |
| ? | <form name="myForm" action="a.html" method="get" onsubmit="return mySub()"> |
| ? | <p> |
| ? | 用戶名：<input name="userName" type="text" /><span id="isCan" style="color: red;"></span> |
| ? | </p> |
| ? | <p> |
| ? | 密碼：<input name="pwd" type="password" /> |
| ? | </p> |
| ? | <p> |
| ? | 電話：<input name="tel" type="text" /> |
| ? | </p> |
| ? | <p> |
| ? | <input type="submit" /> |
| ? | </p> |
| ? | </form> |
| ? | ? |
| ? | ? |
| ? | </body> |
| ? | </html> |
| ? |
總結
- 上一篇： 移动界面侧滑
- 下一篇： java正则表达式的基本语法以及不同环境