- 1.自定義的表單驗(yàn)證屬性：datatype,scriptPrompt,nomorethan,notnull;
- 這四個(gè)屬性并非html元素所有，自定義的規(guī)則屬性，簡(jiǎn)單介紹下:
- datatype:要驗(yàn)證的數(shù)據(jù)類型；
- scriptPrompt：驗(yàn)證不通過后的提示語；
- nomorethan：不超過多少個(gè)字符；
- notnull：是否是必填項(xiàng)("true" or "yes" 表示必填)；
-
- 2.自定義驗(yàn)證規(guī)則checkForm()，用于表單提交的onsubmit="return checkForm();"屬性中，當(dāng)然也可以在js中驗(yàn)證;
- 主函數(shù)：
- function checkForm() {
- var ele = document.forms[0].elements;
- for (i = 0; i < ele.length; i++) {
- if (ele[i].type == 'text' || ele[i].type == 'file'|| ele[i].type == 'textarea' || ele[i].type == 'password') {
- if (isNull(ele[i]) == false) {
- alert(ele[i].scriptPrompt + '不能為空！');
- ele[i].select()
- return false;
- }
- if (checkData(ele[i]) == false) {
- ele[i].select()
- return false;
- }
- }
- }
- return true;
- }
-
- 3.主函數(shù)checkForm()中又有新函數(shù)：isNull(),checkData();
- isNull()函數(shù)：
- function isNull(o) {
- if (o.notnull) {
- if ((o.notnull == "true" || o.notnull == "yes") && trim(o.value) == '') {
- return false;
- }
- }
- return true;
- }
- 注：如果表單中，設(shè)置了notnull屬性，就會(huì)接受該驗(yàn)證；
-
- checkData()函數(shù)：該函數(shù)是任何自定義的數(shù)據(jù)類型，接受該驗(yàn)證：
- function checkData(o) {
- var datatype = o.datatype;
- if (o.value.indexOf('\'') != -1) {
- alert(o.scriptPrompt + "請(qǐng)不要輸入非法字符!\" \' \"");
- return false;
- }
- if (datatype == "number") {
- if (checkNumber(o) == false) {
- alert(o.scriptPrompt + "請(qǐng)輸入正確的數(shù)字!");
- o.select();
- return false;
- }
- }
- if (datatype == "int") {
- if (isNumber(o.value) == false) {
- alert(o.scriptPrompt + "請(qǐng)輸入正確的正整數(shù)！");
- o.select();
- return false;
- }
- if (parseInt(o.value) < parseInt(o.min) || parseInt(o.value) > parseInt(o.max)) {
- alert(o.scriptPrompt + "應(yīng)該在" + o.min + "--" + o.max + "之間！");
- o.select();
- return false;
- }
- }
- if (datatype == "date") {
- if (!isDate(o.value)) {
- alert(o.scriptPrompt + "請(qǐng)輸入正確的日期!");
- o.select();
- return false;
- }
- }
- if (datatype == "zh") {
- if (!checkZH(o.value)) {
- alert(o.scriptPrompt + "只允許輸入漢字!");
- o.select();
- return false;
- }else{
- if (o.nomorethan != "") {
- if (getByteLen(o.value) > o.nomorethan) {
- alert(o.scriptPrompt + "最大長(zhǎng)度" + (o.nomorethan) + ",已經(jīng)輸入了" + getByteLen(o.value) + "（中文長(zhǎng)度為2）!");
- o.select();
- return false;
- }
- }
- }
- }
- if (datatype == "EString") {
- if (getByteLen(o.value) > o.value.length) {
- alert(o.scriptPrompt + "該輸入框不能有中文字符!");
- o.select();
- return false;
- }
- }
- if (datatype == "String") {
- if (o.nomorethan != "") {
- if (getByteLen(o.value) > o.nomorethan) {
- alert(o.scriptPrompt + "最大長(zhǎng)度" + (o.nomorethan) + ",已經(jīng)輸入了"+ getByteLen(o.value) + "（中文長(zhǎng)度為2）!");
- o.select();
- return false;
- }
- }
- }
- if (datatype == "Email") {
- if (o.value != "") {
- return checkEmail(o.value);
- }
- }
- if (datatype == "Phone") {
- if (o.value != "") {
- return checkPhone(o.value, o.scriptPrompt);
- }
- }
- if (datatype == "MobilePhone") {
- if (o.value != "") {
- return checkMobilePhone(o.value);
- }
- }
- if (datatype == "Post") {
- if (o.value != "") {
- return checkPost(o);
- }
- }
- return true;
- }
- 注：該函數(shù)內(nèi)容很多，每個(gè)if條件都有一次驗(yàn)證，驗(yàn)證規(guī)則又是單獨(dú)的js函數(shù)，完全自定義：
- 列出一部分：
-
-
-
- function isDate(value) {
- if (value.length == 0)
- return true;
- if (value.length != 8 || !isNumber(value))
- return false;
- var year = value.substring(0, 4);
- if (year > "2100" || year < "1900")
- return false;
- var month = value.substring(4, 6);
- if (month > "12" || month < "01")
- return false;
- var day = value.substring(6, 8);
- if (day > getMaxDay(year, month) || day < "01")
- return false;
- return true;
- }
-
-
-
- function checkEmail(strEmail) {
- var emailReg = /^[A-Za-z0-9]+@([A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
- if (emailReg.test(strEmail)) {
- return true;
- } else {
- alert("您輸入的Email地址格式不正確！");
- return false;
- }
- }
-
-
-
-
- function checkPhone(strPhone, prompt) {
- var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
- var phoneRegWithArea1 = /^[0][1-9]{2,3}[0-9]{5,10}$/;
- var phoneRegWithArea2 = /^[1][3][1-9]{1}[0-9]{8}$/;
- var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
- var prompt = "請(qǐng)輸入正確的" + prompt + "!"
- if (strPhone.length > 9) {
- if (phoneRegWithArea.test(strPhone) || phoneRegWithArea1.test(strPhone)
- || phoneRegWithArea2.test(strPhone)) {
- return true;
- } else {
- alert(prompt);
- return false;
- }
- } else {
- if (phoneRegNoArea.test(strPhone)) {
- return true;
- } else {
- alert(prompt);
- return false;
- }
- }
- }
-
-
-
-
-
- function checkMobilePhone(strPhone) {
- var pattern = /^[1]\d{10}$/;
- var prompt = "您輸入的手機(jī)號(hào)碼格式不正確!"
- if (!pattern.exec(strPhone)) {
- alert(prompt);
- return false;
- }
- }
-
-
-
-
-
- function checkZH(strName) {
- var pattern = /^[\u4e00-\u9fa5]*$/;
- if (!pattern.exec(strName)) {
- return false;
- }
- return true;
- }
-
- 4.定義完成之后，每個(gè)需要驗(yàn)證的輸入只要加上上面屬性，表單提交的時(shí)候，就會(huì)先驗(yàn)證：
- 如：姓名(必須是中文，且最多10個(gè)字符即五個(gè)漢字)：
- <input name="name" type="text" scriptPrompt="姓名" notnull="true" datatype="zh" nomorethan="10" />
-
- 手機(jī)(必須通過"MobilePhone"的驗(yàn)證規(guī)則)：
- <input name="telMobile" datatype="MobilePhone" scriptPrompt="手機(jī)" nomorethan="20" type="text"/>
-
- 5.這樣一個(gè)js文件，基本完全可以驗(yàn)證整個(gè)項(xiàng)目中需要驗(yàn)證的地方，而且規(guī)則都是自己定的，擴(kuò)充性很強(qiáng)！
該文章在 2012/3/12 13:59:07 編輯過
400 186 1886
