1.自定义的表单验证属性:datatype,scriptPrompt,nomorethan,notnull; 这四个属性并非html元素所有,自定义的规则属性,简单介绍下: datatype:要验证的数据类型; scriptPrompt:验证不通过后的提示语; nomorethan:不超过多少个字符; notnull:是否是必填项("true" or "yes" 表示必填); 2.自定义验证规则checkForm(),用于表单提交的onsubmit="return checkForm();"属性中,当然也可以在js中验证; 主函数: 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.主函数checkForm()中又有新函数:isNull(),checkData(); isNull()函数: function isNull(o) { if (o.notnull) { if ((o.notnull == "true" || o.notnull == "yes") && trim(o.value) == '') { return false; } } return true; } 注:如果表单中,设置了notnull属性,就会接受该验证; checkData()函数:该函数是任何自定义的数据类型,接受该验证: function checkData(o) { var datatype = o.datatype; if (o.value.indexOf('\'') != -1) { alert(o.scriptPrompt + "请不要输入非法字符!\" \' \""); return false; } if (datatype == "number") { if (checkNumber(o) == false) { alert(o.scriptPrompt + "请输入正确的数字!"); o.select(); return false; } } if (datatype == "int") { if (isNumber(o.value) == false) { alert(o.scriptPrompt + "请输入正确的正整数!"); o.select(); return false; } if (parseInt(o.value) < parseInt(o.min) || parseInt(o.value) > parseInt(o.max)) { alert(o.scriptPrompt + "应该在" + o.min + "--" + o.max + "之间!"); o.select(); return false; } } if (datatype == "date") { if (!isDate(o.value)) { alert(o.scriptPrompt + "请输入正确的日期!"); 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 + "最大长度" + (o.nomorethan) + ",已经输入了" + getByteLen(o.value) + "(中文长度为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 + "最大长度" + (o.nomorethan) + ",已经输入了"+ getByteLen(o.value) + "(中文长度为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; } 注:该函数内容很多,每个if条件都有一次验证,验证规则又是单独的js函数,完全自定义: 列出一部分: /* * 用途:检查输入的日期是否符合 yyyyMMdd 输入: value:字符串 返回: 如果通过验证返回true,否则返回false */ 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; } /* * 用途:检查输入的Email信箱格式是否正确 输入: strEmail:字符串 返回: 如果通过验证返回true,否则返回false */ 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; } } /* * 用途:检查输入的电话号码格式是否正确 输入: strPhone:字符串 返回: 如果通过验证返回true,否则返回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 = "请输入正确的" + 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; } } } /** * 验证手机格式 * @param {} strPhone * @return {Boolean} */ function checkMobilePhone(strPhone) { var pattern = /^[1]\d{10}$/; var prompt = "您输入的手机号码格式不正确!" if (!pattern.exec(strPhone)) { alert(prompt); return false; } } /** * 验证只能输入中文 * @param {} strName * @return {Boolean} */ function checkZH(strName) { var pattern = /^[\u4e00-\u9fa5]*$/; if (!pattern.exec(strName)) { return false; } return true; } 4.定义完成之后,每个需要验证的输入只要加上上面属性,表单提交的时候,就会先验证: 如:姓名(必须是中文,且最多10个字符即五个汉字): <input name="name" type="text" scriptPrompt="姓名" notnull="true" datatype="zh" nomorethan="10" /> 手机(必须通过"MobilePhone"的验证规则): <input name="telMobile" datatype="MobilePhone" scriptPrompt="手机" nomorethan="20" type="text"/> 5.这样一个js文件,基本完全可以验证整个项目中需要验证的地方,而且规则都是自己定的,扩充性很强!
详细解决方案
自定义表单应验规则
热度:82 发布时间:2012-10-29 10:03:53.0
相关解决方案