首頁 > 開發者 > JavaScript
Javascript實現用戶端表單校正
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>Untitled Document</title></head><body><!--表單校正。--><script type="text/javascript">/*//校正使用者名稱function checkUser(){var flag;var oUserNode = document.getElementsByName("user")[0];var name = oUserNode.value;//定義Regex8var reg = new RegExp("^[a-z]{4}$","i");//必須是四個字母。 //reg = new RegExp("^\\d{4}$");// 必須是四個數字。 //reg = /^\d{4}$/;var oSpanNode = document.getElementById("userspan");//if(name=="abc"){if(reg.test(name)){oSpanNode.innerHTML = "使用者名稱正確".fontcolor("green");flag = true;}else{oSpanNode.innerHTML = "使用者名稱錯誤".fontcolor("red");flag = false;}return flag;}*//* * 發現很多框的校正除了幾個內容不同外，校正的過程是一樣的。 * 所以進行了代碼的提取。 * */function check(name,reg,spanId,okinfo,errinfo){var flag;var val = document.getElementsByName(name)[0].value;var oSpanNode = document.getElementById(spanId);if(reg.test(val)){oSpanNode.innerHTML = okinfo.fontcolor("green");flag = true;}else{oSpanNode.innerHTML = errinfo.fontcolor("red");flag = false;}return flag;}//校正使用者名稱。function checkUser(){var reg = /^[a-z]{4}$/i;return check("user",reg,"userspan","使用者名稱正確","使用者名稱錯誤");}//校正密碼；function checkPsw(){var reg = /^\d{4}$/;return check("psw",reg,"pswspan","密碼格式正確","密碼格式錯誤");}//校正確定密碼。只要和密碼一致即可。 function checkRepsw(){ var flag;//擷取密碼框內容。var pass = document.getElementsByName("psw")[0].value;//擷取確認密碼框內容。var repass = document.getElementsByName("repsw")[0].value;//擷取確認密碼的span地區。 var oSpanNode = document.getElementById("repswspan");if(pass==repass){oSpanNode.innerHTML = "兩次密碼一致".fontcolor("green");flag = true;}else{oSpanNode.innerHTML = "兩次密碼不一致".fontcolor("red");flag = false;}return flag; }//校正郵件function checkMail(){var reg = /^\w+@\w+(\.\w+)+$/i;return check("mail",reg,"mailspan","郵件地址正確","郵件地址錯誤");}// 提交事件處理。function checkForm(){//alert(checkUser() +"--"+ checkPsw() +"--"+ checkRepsw() +"--"+ checkMail());if(checkUser() && checkPsw() && checkRepsw() && checkMail())return true;return false;}function mySubmit(){var oFormNode = document.getElementById("userinfo");oFormNode.submit();}</script><form id="userinfo" onsubmit="return checkForm()">使用者名稱稱：<input type="text" name="user" onblur="checkUser()" /><span id="userspan"></span><br/>輸入密碼：<input type="text" name="psw" onblur="checkPsw()" /><span id="pswspan"></span><br/>確定密碼：<input type="text" name="repsw" onblur="checkRepsw()" /><span id="repswspan"></span><br/>郵件地址：<input type="text" name="mail" onblur="checkMail()" /><span id="mailspan"></span><br/><input type="submit" value="提交資料" /></form><hr/><!--自定提交按鈕--><input type="button" value="我的提交" onclick="mySubmit()" /></body></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
