正則表示式基礎運用
阿新 • • 發佈：2018-12-09
驗證表單
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>正則表單驗證</title> <style type="text/css"> *{ margin: 0; padding: 0; } .divb{ /*width: 100%;*/ height: 100%; background: url(images/1503471852340.jpg) no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; margin:20px auto; overflow: hidden; } .divs{ width: 550px; height: 500px; border: 1px solid #999999; margin: 200px auto; background-color: rgba(255,255,255,0.3); border-radius: 10px; } table{ border-collapse: collapse; box-sizing:border-box; border: 0px solid rgba(255,255,255,0); margin: 0 auto; } .tdd1,.tdd2{ height: 50px; padding: 10px 0px; } .tdd{ height: 50px; /*margin-bottom: 20px;*/ text-align: center; font:bold 24px "微軟雅黑"; } .tdd1{ width: 100px; text-align: right; font-weight: bold; } .tdd2{ width: 450px; text-align: center; } input{ width: 360px; height: 35px; padding: 5px 10px; font:bold 16px "微軟雅黑"; outline: none; border: 1px solid #000; background-color: rgba(255,255,255,0.6); } #button{ width: 150px; height: 50px; margin-top: 10px; border: 0px; border-radius: 10px; } </style> </head> <body> <div class="divb"> <div class="divs"> <form action="" method="get"> <table border="" cellspacing="" cellpadding=""> <tr class="trr"> <td class="tdd" colspan="2">使用者註冊</td> </tr> <tr class="trr"> <td class="tdd1">使用者名稱：</td> <td class="tdd2"><input id="user" type="text" value="" placeholder="請輸入使用者名稱"/></td> </tr> <tr class="trr"> <td class="tdd1">密碼：</td> <td class="tdd2"><input id="psw1" class="psw" type="password" value="" placeholder="請輸入密碼"/></td> </tr> <tr class="trr"> <td class="tdd1">確認密碼：</td> <td class="tdd2"><input id="psw2" class="psw" type="password" value="" placeholder="請再次輸入密碼"/></td> </tr> <tr class="trr"> <td class="tdd1">手機號：</td> <td class="tdd2"><input type="tel" id="tel" placeholder="請輸入手機號"/></td> </tr> <tr class="trr"> <td class="tdd1">電子郵件：</td> <td class="tdd2"><input type="email" id="email" value="" placeholder="請輸入電子郵箱"/></td> </tr> <tr class="trr"> <!--<td class="tdd1"></td>--> <td class="tdd2" colspan="2"><input type="submit" id="button" value="注 冊" /></td> </tr> <tr class="trr"> <td class="tdd1"></td> <td class="tdd2"></td> </tr> <tr class="trr"> <td class="tdd1"></td> <td class="tdd2"></td> </tr> </table> </form> </div> </div> <script type="text/javascript"> var formreg = /^[a-zA-Z][a-zA-Z0-9]{5,14}$/g; var pswmreg = /^[a-zA-Z][\/\*\.\_]{5,11}$/g; var telreg = /^1[356789][0-9]{9}$/g; var emailreg = /^[a-zA-Z0-9][email protected][a-zA-Z0-9]+[\.][a-zA-Z]{2,4}$/g; var inp = document.getElementsByTagName("input"); inp[0].onfocus = function(){ formreg.lastIndex = 0; inp[0].placeholder = ""; } inp[0].onblur = function(){ if(formreg.test(inp[0].value)){ inp[0].style.outline = "1px solid #3f97ff"; }else if(inp[0].value == ""){ inp[0].placeholder = "請輸入使用者名稱"; inp[0].style.outline = "1px solid #f00"; }else{ inp[0].style.outline = "1px solid #f00"; } } inp[1].onfocus = function(){ pswmreg.lastIndex = 0; inp[1].placeholder = ""; } inp[1].onblur = function(){ if(pswmreg.test(inp[1].value)){ inp[1].style.border = "1px solid #3f97ff"; }else if(inp[1].value == ""){ inp[1].placeholder = "請輸密碼"; inp[1].style.border = "1px solid #f00"; }else{ inp[1].placeholder = "請輸密碼"; inp[1].style.border = "1px solid #f00"; } } inp[2].onfocus = function(){ pswmreg.lastIndex = 0; inp[2].placeholder = ""; } inp[2].onblur = function(){ if(inp[2].value == inp[1].value && inp[2].value != ""){ inp[2].style.border = "1px solid #3f97ff"; }else if(inp[2].value == ""){ inp[2].placeholder = "請再次輸入密碼"; inp[2].style.border = "1px solid #f00"; }else{ inp[2].style.border = "1px solid #f00"; alert("兩次密碼輸入不一致"); } } inp[3].onfocus = function(){ telreg.lastIndex = 0; inp[3].placeholder = ""; } inp[3].onblur = function(){ if(telreg.test(inp[3].value)){ inp[3].style.border = "1px solid #3f97ff"; }else if(inp[3].value == ""){ inp[3].placeholder = "請輸入手機號"; inp[3].style.border = "1px solid #f00"; }else{ inp[3].style.border = "1px solid #f00"; } } inp[4].onfocus = function(){ emailreg.lastIndex = 0; inp[4].placeholder = ""; } inp[4].onblur = function(){ if(emailreg.test(inp[4].value)){ inp[4].style.border = "1px solid #3f97ff"; }else if(inp[4].value == ""){ inp[4].placeholder = "請輸入電子郵箱"; inp[4].style.border = "1px solid #f00"; }else{ inp[4].style.border = "1px solid #f00"; } } </script> </body> </html>
