<html> <head> <title></title> <style type="text/css"> *{margin:0; padding:0; font-size:14px; font-famliy:"微軟雅黑"; font-style:normal; } body{background: #6b69fb;} .container{ border:solid 1px #F1F1F1; width:600px; height:600px; background:#fff; margin:20px auto; padding-bottom:10px; } .container h1{ font-size:22px; font-family:微軟雅黑; text-align:center; color:#333; display:block; margin:20px; border:0px solid gray; } .div1{ margin-left:55px; } #name,#pwd,#rpwd,#phone,#card,#email{ color:gray; height:25px; width:200px; font-size:10px; padding-left:10px; margin-top:10px; } #btn1,#btn2{ height:25px; width:60px; display:block; float:left; margin-left:70px; margin-top:20px; } #username_msg,#pwd_msg,#rpwd_msg,#phone_msg,#car_msg,#email_msg{ color:#FF0000; font-size:10px; } </style> <script type="text/javascript"> function userName(){ //依據id找到對應的節點 var obj = document.getElementById('name'); obj.className=''; var obj2 = document.getElementById('username_msg'); obj2.innerHTML=''; obj2.className=''; //要求：字母或數字打頭和結尾，且長度在4-12個之間 var reg=/^[a-zA-Z\d]\w{2,10}[a-zA-Z\d]$/ //alert(obj.value); //alert(reg.test(obj.value)); if(!reg.test(obj.value)){ //innerHTML:標籤之間的html代碼 obj2.innerHTML=' × 用戶名不符合規範'; obj2.className="s1"; return false; }else{ obj2.innerHTML='√'; obj2.className='s1_ok'; } return true; } function passWord(){ var obj = document.getElementById('pwd'); obj.className=''; var obj2 = document.getElementById('pwd_msg'); obj2.innerHTML=''; obj2.className=''; var reg = /^\w{6,15}$/g; if (!reg.test(obj.value)||obj.value=='') { obj2.innerHTML=' × 密碼不符合規範'; obj2.className="s1"; return false; }else{ obj2.innerHTML='√'; obj2.className='s1_ok'; } return true; } function realPass(){ var obj = document.getElementById('pwd'); var robj = document.getElementById('rpwd'); obj.className=''; var obj2= document.getElementById('rpwd_msg'); obj2.innerHTML=''; obj2.className=''; if (obj.value!=robj.value || robj.value=='') { obj2.innerHTML='兩次密碼不一樣'; obj2.className="s1"; return false; }else{ obj2.innerHTML='√'; obj2.className='s1_ok'; } return true; } function validPhone(){ var obj = document.getElementById('phone'); obj.className=''; var obj2 = document.getElementById('phone_msg'); var reg = /^\d{3,5}-{1}\d{8}$/; /*010-12345678*/ obj2.innerHTML=''; obj2.className=''; if (!reg.test(obj.value)) { obj2.innerHTML='號碼格式錯誤爲:xxx-xxxxxxxx'; obj2.classNam="s1"; return false; }else{ obj2.innerHTML='√'; obj2.className='s1_ok'; } return true; } function validCard(){ var obj = document.getElementById('card'); obj.className=''; var reg1 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; var reg2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/; var obj2 = document.getElementById('car_msg'); obj2.innerHTML=''; obj2.className=''; if (!reg1.test(obj.value) && !reg2.test(obj.value)) { /*||不行，必須&&*/ obj2.innerHTML='Card格式不對'; obj2.className="s1"; return false; }else{ obj2.innerHTML='√'; obj2.className='s1_ok'; } return true; } function validEmail(){ var obj = document.getElementById('email'); obj.className=''; var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; var obj2= document.getElementById('email_msg'); obj2.innerHTML=''; obj2.className=''; if (!reg.test(obj.value) || obj.value=='') { obj2.innerHTML='郵箱格式不對'; obj2.className="s1"; return false; }else{ obj2.innerHTML='√'; obj2.className='s1_ok'; } return true; } function validform(){ return userName()&&passWord()&& realPass()&&validPhone()&&validCard()&&validEmail(); } </script> </head> <body> <div class="container" > <h1 align="center">註冊頁面</h1> <div class="div1" > <form onsubmit="return validform();"><!-- align="center" 會出現格式出亂--> <table> <tr> <td>用戶名:</td> <td><input type="text" id="name" onblur="userName();" /> <span class="s1" id="username_msg"></span> </td> </tr> <tr> <td>密碼:</td> <td><input type="password" id="pwd" onblur="passWord();" /> <span class="s1" id="pwd_msg"></span> </td> </tr> <tr> <td>確認密碼:</td> <td><input type="password" id="rpwd" onblur="realPass();" /> <span class="s1" id="rpwd_msg"></span> </td> </tr> <tr> <td>iphone:</td> <td><input type="text" id="phone" onblur="validPhone();" /> <span class="s1" id="phone_msg"></span> </td> </tr> <tr> <td>idCard:</td> <td><input type="text" id="card" onblur="validCard();" /> <span class="s1" id="car_msg"></span> </td> </tr> <tr> <td>email:</td> <td><input type="text" id="email" onblur="validEmail();" /> <span class="s1" id="email_msg"></span> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="註冊"/> <input type="reset" value="重置"/> </td> </tr> </table> </form> </div> </div> </body>
</html>
