首頁 > 開發者 > JavaScript
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>註冊表單驗證</title> 5 <script src="jquery.js"></script> 6 <style type="text/css"> 7 table{background-color:pink;width:80%;height:300px;} 8 td{text-align:center;} 9 </style> 10 <script language="javascript"> 11 $("document").ready(function(){ 12 $("#form1").submit(function(){ 13 var user=$("#user").val(); 14 var username=/^[a-z]{6,10}/i; 15 if(user.length==0){ 16 $("#error1").html("帳號不可以為空白"); 17 return false; 18 }else if(!username.test(user)){ 19 $("#error1").html("請輸入6-10的字母"); 20 return false; 21 }else{ 22 $("#error1").html("輸入正確"); 23 } 24 25 var password=$("#pw").val(); 26 var password1=/^[0-9]{6,10}/; 27 if(password.length==0){ 28 $("#error2").html("密碼不可以為空白"); 29 return false; 30 }else if(!password1.test(password)){ 31 $("#error2").html("請輸入6-10位的數字密碼"); 32 return false; 33 }else{ 34 $("#error2").html("輸入正確"); 35 } 36 37 var name=$("#name").val(); 38 var name1=/^[a-z]{6,10}/i; 39 if(name.length==0){ 40 $("#error3").html("姓名不可以為空白"); 41 return false; 42 }else if(!name1.test(name)){ 43 $("#error3").html("請輸入6-10位字母"); 44 return false; 45 }else{ 46 $("#error3").html("輸入正確"); 47 } 48 49 50 var age=$("#ag").val(); 51 var age1=/^[1-9]{1}[0-9]{0,1}$/; 52 if(age.length==0){ 53 $("#error4").html("年齡不可以為空白"); 54 return false; 55 }else if(!age1.test(age)){ 56 $("#error4").html("請輸入合法年齡"); 57 return false; 58 }else{ 59 $("#error4").html("輸入正確"); 60 } 61 62 var email=$("#em").val(); 63 var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/; 64 if(email.length==0){ 65 $("#error5").html("email不可以為空白"); 66 return false; 67 }else if(!email1.test(email)){ 68 $("#error5").html("請輸入合法電子郵件"); 69 return false; 70 }else{ 71 $("#error5").html("輸入正確"); 72 } 73 74 var telephone=$("#tel").val(); 75 var telephone1=/^[1]{1}[0-9]{10}/; 76 if(telephone.length==0){ 77 $("#error6").html("電話不可以為空白"); 78 return false; 79 }else if(!telephone1.test(telephone)){ 80 $("#error6").html("請輸入合法電話"); 81 return false; 82 }else{ 83 $("#error6").html("輸入正確"); 84 } 85 86 }); 87 }); 88 </script> 89 </head> 90 <body> 91 <center> 92 <form action="" method="post" id="form1" name="form1"> 93 <h1>註冊頁面</h1> 94 <table border="1px"> 95 <tr> 96 <td> 97 賬 號： 98 <input type="text" name="admin" id="user"/> 99 <div id="error1" style="display:inline;color:red;"></div>100 </td>101 </tr>102 <tr> 103 <td>104 密 碼：105 <input type="password" name="password" id="pw"/>106 <div id="error2" style="display:inline;color:red;"></div>107 </td>108 </tr>109 <tr> 110 <td>111 姓 名：112 <input type="text" name="name1" id="name"/>113 <div id="error3" style="display:inline;color:red;"></div>114 </td>115 </tr>116 <tr>117 <td>118 年 齡：119 <input type="text" name="age" id="ag"/>120 <div id="error4" style="display:inline;color:red;"></div>121 </td>122 </tr>123 <tr>124 <td>125 性別：126 <input type="radio" name="sex" value="boy"/>男127 <input type="radio" name="sex" value="girl"/>女 128 </td>129 </tr>130 <tr>131 <td>132 電子郵件：<input type="text" name="email" id="em"/>133 <div id="error5" style="display:inline;color:red;"></div>134 </td>135 </tr>136 <tr> 137 <td>138 電話號碼：<input type="text" name="telephone" id="tel"/>139 <div id="error6" style="display:inline;color:red;"></div>140 </td>141 </tr>142 <tr> 143 <td align="center">144 <input type="submit" value="註冊"/>145 146 </td>147 148 </tr>149 </table>150 </form> 151 </center>152 </body>153 </html>
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Regex表單驗證</title> 5 <style type="text/css"> 6 table{background-color:yellow;border:2px blue solid;} 7 </style> 8 </head> 9 <body> 10 <center> 11 <form action="login.html" method="post" onsubmit="return isForm()"> 12 <h1>註冊頁面</h1> 13 <table border="1px" width="350px" height="400px"> 14 <tr> 15 <td> 16 賬 號： 17 <input type="text" name="username" id="user"/> 18 <div id="error1" style="display:inline;color:red;"></div> 19 </td> 20 </tr> 21 <tr> 22 <td> 23 密 碼： 24 <input type="password" name="password" id="pw"/> 25 <div id="error2" style="display:inline;color:red;"></div> 26 </td> 27 </tr> 28 <tr> 29 <td> 30 姓 名： 31 <input type="text" name="name1" id="name"/> 32 <div id="error3" style="display:inline;color:red;"></div> 33 </td> 34 </tr> 35 <tr> 36 <td> 37 性 別： 38 <input type="radio" name="sex" value="boy"/>男 39 <input type="radio" name="sex" value="girl"/>女 40 </td> 41 </tr> 42 <tr> 43 <td> 44 年 齡： 45 <input type="text" name="age" id="ag"/> 46 <div id="error4" style="display:inline;color:red;"></div> 47 </td> 48 </tr> 49 <tr> 50 <td> 51 電子郵件：<input type="text" name="email" id="em"/> 52 <div id="error5" style="display:inline;color:red;"></div> 53 </td> 54 </tr> 55 <tr> 56 <td> 57 電話號碼：<input type="text" name="telephone" id="tel"/> 58 <div id="error6" style="display:inline;color:red;"></div> 59 </td> 60 </tr> 61 <tr> 62 <td align="center"> 63 <input type="submit" value="註冊"/> 64 </td> 65 </tr> 66 </table> 67 </form> 68 <script language="javascript"> 69 function isForm(){ 70 var username=document.getElementById("user").value; 71 var password=document.getElementById("pw").value; 72 var name=document.getElementById("name").value; 73 var age=document.getElementById("ag").value; 74 var email=document.getElementById("em").value; 75 var telephone=document.getElementById("tel").value; 76 77 78 var error1=document.getElementById("error1"); 79 var error2=document.getElementById("error2"); 80 var error3=document.getElementById("error3"); 81 var error4=document.getElementById("error4"); 82 var error5=document.getElementById("error5"); 83 var error6=document.getElementById("error6"); 84 85 var username1=/^[a-z]{6,10}/i; 86 var password1=/^[0-9]{6,10}/; 87 var name1=/^[a-z]{6,10}/i; 88 var age1=/^[1-9]{1}[0-9]{0,1}$/; 89 var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/; 90 var telephone1=/^[1]{1}[0-9]{10}/; 91 92 93 94 if(!username1.test(username)){ 95 alert("請輸出6-10位字母"); 96 return false; 97 } 98 error1.innerHTML="輸入正確"; 99 if(!password1.test(password)){100 alert("請輸入6-10的數字密碼");101 return false;102 }103 error2.innerHTML="輸入正確";104 if(!name1.test(name)){105 alert("請輸入6-10位字母");106 return false;107 }108 error3.innerHTML="輸入正確";109 if(!age1.test(age)){110 alert("請輸入合法的年齡");111 return false;112 }113 error4.innerHTML="輸入正確";114 if(!email1.test(email)){115 alert("請輸入合法電子郵件");116 return false;117 }118 error5.innerHTML="輸入正確";119 if(!telephone1.test(telephone)){120 alert("請輸人電話連絡方式");121 return false;122 }123 error6.innerHTML="輸入正確";124 return true;125 }126 127 </script>128 </center> 129 </body>130 </html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
