標籤：javascipt html css
本文出自：http://blog.csdn.net/svitter
開發一個註冊的HTML頁面， 用於搜集使用者的註冊資訊。包括： 姓名（不可為空）， 年齡（必須超過17歲）， 體重（30-150kg）， 班級（下拉式清單），登陸密碼（至少8位長）、確認密碼（和登入密碼一致），Email(不可為空) , 電話，QQ， 個人簡曆等資訊。 並針對這些表的元素來建立相應的驗證，如果檢測到錯誤， 在輸入框後面用紅色的字顯示錯誤。要用到前面幾節學習過的單行文本輸入框text、下拉式清單方塊select、密碼輸入框password、多行文本輸入框textarea。這是一個較實用的使用者註冊表單.。
register.html:
<!doctype html><html><head><meta charset="utf-8"><title>實驗2</title> <link href="check.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="load.js"></script></head><!--return validate()和validate()在於是否清空表單--><body onload="load_greeting()"><form id="test" align="left" onSubmit="return validate()"> <table> <tr> <td>Name*:</td> <td><input type="text" name="Name" id="name" size="20" onChange='check("name")'></td> <td id="nameCheck" class="check" hidden="true">*姓名不可為空</td> </tr> <tr> <td>Age:</td> <td><input type="text" name="Age" id="age" size="20" onChange='check("age")'></td> <td id="ageCheck" class="check" hidden="true">*年齡不能小於17歲</td> </tr> <tr > <td>weight:</td> <td><input type="text" name="weight" id="weight" size="20" onChange='check("weight")'></td> <td id="weightCheck" class="check" hidden="true">*體重範圍為30~150KG</td> </tr> <tr> <td>Class:</td> <td><select id="class" name="class"> <option>class0</option> <option>class1</option> <option>class2</option> <option>class3</option></select> </td> </tr> <tr> <td>Password*:</td> <td><input type="password" name="Password" id="password" size="20" onChange='check("password")'></td> <td id="passwordCheck" class="check" hidden="true">*password length less than 8</td> </tr> <tr> <td>Confirm Password*:</td> <td><input type="password" name="cpassword" id="cpassword" size="20" onChange='check("cpassword")'></td> <td id="cpasswordCheck" class="check" hidden="true">*Two passwd is not same</td> </tr> <tr > <td>Email*:</td> <td><input type="email" name="email" id="email" size="20" onChange='check(this.id)'></td> <td id="emailCheck" class="check" hidden="true">*電子郵件名非法！</td> </tr> <tr> <td>TEL:</td> <td><input type="text" name="TEL" id="TEL" size="20"></td> </tr> <tr> <td>QQ:</td> <td><input type="text" name="QQ" id="QQ" size="20"></td> </tr> <tr> <td>Personal Information:</td> <td><textarea rows="10" cols="19"></textarea></td> </tr> <tr> <td colspan="3"> <input type="submit" name="submit"> <input type="reset" name="reset"> </td> </tr> </table> </form></body></html>
td.check{color:#C00;font-weight:bold;}
function check(str){var x = document.getElementById(str);var y = document.getElementById(str+"Check");//alert("check!");if(str=="name"){if(x.value=="")y.hidden = false;elsey.hidden = true;}else if(str=="age"){if(isNaN(x.value) || x.value < 17)y.hidden = false;elsey.hidden = true;}else if(str=="weight"){x = x.value;if(isNaN(x) || x < 30 || x > 150)y.hidden = false;elsey.hidden = true;}else if(str=="password"){x = x.value.length;if(x < 8){y.hidden = false;//alert("check!");}elsey.hidden = true;}else if(str=="cpassword"){var z = document.getElementById("password").value;x = x.value;if(x != z)y.hidden = false;elsey.hidden = true;}else if(str=="email"){x = x.value.indexOf("@")if(x == -1)y.hidden = false;elsey.hidden = true;}return y.hidden;}function validate(){var arr=["name", "age", "weight", "password", "cpassword", "email"];var i = 0;submitOK = true;while(i <= 5){if(!check(arr[i])){alert(arr[i]+" wrong!");submitOK = false;break;}i++;}if(submitOK){alert("提交成功！");return true;}else{alert("提交失敗");return false;}}function load_greeting(){//alert("visit \n");}
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
