问题描述
我有一个想法:在html的标签上加一个自定义属性format、表示这个文本框的输入范围/** * format格式設定 * number:数字0-9 integer:整形 * date:日期2010-10-12 * mail:abc@163.com * double:実数12.35 * */<input type="text" format="number"/><input type="date" format="number"/><input type="double" format="number"/>然后利用jquery的属性选择器分类选择出format为某一特定格式的元素、加上特定的验证规则例如:$(function(){ $("[format=number]").keypress(function(){var regu=/[0-9]/;return regu.test(String.fromCharCode(event.keyCode)); }); $("[format=date]").keypress(function(){******* }); $("[format=date]").keyup(function(){******* }); $("[format=date]").keydown(function(){******* }); $("[format=double]").keypress(function(){***** }); $("[format=mail]").keypress(function(){***** }); $("[format=mail]").keyup(function(){***** }); $("[format=mail]").keydown(function(){***** });});这样页面打开时不同的format属性的文本框就有了不同的验证规则在此想抛砖引玉、希望大家集思广益、把这个功能完善起来比如:date型的文本框输入时每一个字符必须在0-9和/之间输入完后、日期必须正确、如果没通过规则检查、不准它失去焦点
解决方案
呵呵，，不必自定义、就使用原来的属性,例如:<input type="text" lang="提示信息:当输入不符合你的验证规则就提示此信息[使用其他属性也可以]"alt="验证规则:只能输入字母或汉字"/>、在js中取出验证规则进行验证、然后给出提示。下面是自写的一个验证表单通用js、由于时间关系尚未完善、作为参考提供给你：//此js是验证规则是固定的：<input type="text" lang="提示信息[例如:用户名]" />//如想使用form表单元素自己提供的验证规则：<input type="text" lang="提示信息[例如:用户名]" alt="验证规则"/>/* * 如需效验ip或密码、请将密码id设置为:password、确认密码id设置为：confirmPassword、ip的id设置为ip、效验代码默认将这3个元素id视为:passwordconfirmPasswordip、或在效验代码中将这3元素id修改成你自己定义的元素id,否则将无法效验 * *///oForm:Form表单对象 、值: HTML表单//minLength:最小长度 、值：大于0的整数//maxLength:最大长度 、值：无穷大的整数//isLength:是否效验最大、最小长度、值：true/false//isEmpty:是否效验是否为空值 、值：true/false //isSpecial是否效验是否包含特殊字符、值： true/false//isSpace:是否效验是否包含空格 、值：true/false//isNotEqual是否效验是否相等、值：true/false//isNumber是否效验全由数字组成、值：true/false//isDataFormat是否效验日期格式、值：true/false//isEmailFormat是否效验邮箱格式、值：true/false//isPhoneFormat是否效验手机格式、值: true/false//isPhoneTeleFormat是否效验电话格式、值: true/false//isWordMother是否效验全由字母组成、值：true/false//isMenword是否效验全由汉字组成、值：true/false//暂未效验日期、邮箱、手机、电话、字母、汉字或其他需求、如有需求可自行实行//倍数:用于设定textarea元素的字符最大长度,由于textarea元素有可能输入比较多的字符、所以使用自定义的最大长度maxLength乘倍数multiple、[maxLength * multiple]、默认自定义的最大长度maxLength的10倍var multiple = 10;//对比元素Value,例如:密码值var equalValue = "";//确认元素名称、例如:确认密码var confirmElementName = "confirmPassword";//IP元素名称、例如IP效验var ipElementName = "ip";//对比元素名称、用于和确认元素比较Value、例如:密码或新密码var equalElementName = "password";//对比和确认元素类型(默认:password)var equalElementType = "password";//调用//onsubmit="return checkForm(this,8,20,true,true,true,true,true,false,false,false,false,false,false,false)";//checkForm(oForm,minLength,maxLength,isLength,isEmpty,isSpecial,isSpace,isNotEqual,isNumber,isDataFormat,isEmailFormat,isPhoneFormat,isPhoneTeleFormat,isWordMother,isMenword)//根据指定需求效验表单所有元素、效验通过返回true否则falsefunction checkForm(oForm,minLength,maxLength,isLength,isEmpty,isSpecial,isSpace,isNotEqual,isNumber,isDataFormat,isEmailFormat,isPhoneFormat,isPhoneTeleFormat,isWordMother,isMenword){var isStatus = false;var oElements = oForm.elements;for(var i=0;i<oElements.length;i++){var element = oElements[i];if(element.type!="hidden"){if(element.type=="text" || element.type=="password" || element.type=="file" || element.type=="hidden"){isStatus = checkTPHFT(element,minLength,maxLength,isLength,isEmpty,isSpecial,isSpace,isNotEqual,isNumber,isDataFormat,isEmailFormat,isPhoneFormat,isPhoneTeleFormat,isWordMother,isMenword);if(isStatus==false){break;}}else if(element.type=="textarea"){var tempMaxLength = maxLength * multiple;isStatus = checkTPHFT(element,minLength,maxLength,isLength,isEmpty,isSpecial,isSpace,isNotEqual,isNumber,isDataFormat,isEmailFormat,isPhoneFormat,isPhoneTeleFormat,isWordMother,isMenword);if(isStatus==false){break; }}else if(element.type=="checkbox" || element.type=="radio"){//暂未实现}else if(element.type=="select-one" || element.type=="select-multiple"){//暂未实现}else{//暂未实现 }}}return isStatus;}//效验text、password、hidden、file、textarea元素function checkTPHFT(element,minLength,maxLength,isLength,isEmpty,isSpecial,isSpace,isNotEqual,isNumber,isDataFormat,isEmailFormat,isPhoneFormat,isPhoneTeleFormat,isWordMother,isMenword){var isStatus = false;if(isEmpty){isStatus = checkEmpty(element);if(isStatus==false){return isStatus;} }if(isLength){isStatus = checkLength(element,minLength,maxLength);if(isStatus==false){return isStatus;}}if(isNumber){isStatus = checkNumber(element);if(isStatus==false){return isStatus;}}if(isSpace){isStatus = checkSpace(element);if(isStatus==false){return isStatus;}}if(isSpecial){isStatus = checkSpecialChar(element);if(isStatus==false){return isStatus;}}if(isNotEqual){isStatus = checkNotEqual(element,minLength,maxLength);if(isStatus==false){return isStatus;}}if(isDataFormat){isStatus = checkDateFormat(element);if(isStatus==false){return isStatus;}}if(isEmailFormat){isStatus = checkEmailFormat(element);if(isStatus==false){return isStatus;}}if(isPhoneFormat){isStatus = checkPhoneFormat(element);if(isStatus==false){return isStatus;}}if(isPhoneTeleFormat){isStatus = checkTelephoneFormat(element);if(isStatus==false){return isStatus;}}if(isWordMother){isStatus = checkWordMother(element);if(isStatus==false){return isStatus;}}if(isMenword){isStatus = checkManWord(element);if(isStatus==false){return isStatus;}}return isStatus;}//效验是否全由数字组成function checkNumber(element){var rule = "/^d+$/";if(!element.value.match(rule)){//alert("你好! "+element.lang+"只能是数字!不能包含其他字符!");alert("Hello! "+element.lang+" Only a number, can not contain other characters!");//getFocus(element);return false;}else{return true;}}//效验密码是否不相等function checkNotEqual(element,minLength,maxLength){var isStatus = false;isStatus = equalIsElement(element);if(isStatus==false){return isStatus;}return isStatus;}//效验元素类型是否为password并且元素id=confirmPasswordfunction equalIsElement(element){if(element.type==equalElementType && element.name==equalElementName){equalValue = element.value;}var isStatus = false;if(element.type==equalElementType && element.name==confirmElementName){isStatus = equalElement(element,equalValue);if(isStatus==false){return isStatus;}}else{isStatus = true;}return isStatus;}//比较2个值是否相等function equalElement(element,elementValue){if(element.value!=elementValue){//alert("你好!你输入的"+element.lang+"和密码不一致 请重新输入!");alert("Holle! You type "+element.lang+" And inconsistent Please re-enter the password!");return false;}else{return true;}}//效验最大、最小长度function checkLength(element,minLength,maxLength){if(element.value.length < minLength || element.value.length > maxLength){//alert("你好!"+element.lang+"长度必须大于"+minLength+"位小于"+maxLength+"位!请重新输入!");alert("Hello! "+element.lang+" Length must be greater than "+minLength+"Bit Less than "+maxLength+" Bit Please re-enter!");//getFocus(element);return false;}else{return true;}}//效验是否为空值function checkEmpty(element){if(element.value=="" || element.value==null){//alert("你好!"+element.lang+"不能为空_是必填项_请认真填写!");alert("Hello! "+element.lang+" Can not be empty is required please fill in!");//getFocus(element);return false;}else{ return true;}}//效验是否包含空格function checkSpace(element){if(element.value.indexOf(' ')>=0){//alert("你好!"+element.lang+"不能是空格_且不能包含空格_是必填项_请认真填写!");alert("Hello! "+element.lang+" Can not be blank And can not contain spaces Is required Please fill in!");//getFocus(element);return false;}else{ return true;}}//效验是否包含特殊字符function checkSpecialChar(element){ var specialChars = new Array("`","~","!","@","#","$","%","^","&","*","(",")","-","_","=","+","\","|",";",":","'",",","<",".",">","/","?"); if(element.id=ipElementName){ specialChars = new Array("`","~","!","@","#","$","%","^","&","*","(",")","-","_","=","+","\","|",";",":","'",",","<",">","/","?"); } var retuenChar = ""; for(var i=0;i<specialChars.length;i++){ if(element.value.indexOf(specialChars[i])>=0){ retuenChar += specialChars[i]; }else if(element.value.indexOf('"')>=0){ retuenChar += '"'; }else{ } } if(retuenChar.length>0){ //alert("你好!"+element.lang+"不能包含特殊字符: "+retuenChar); alert("Hello! "+element.lang+" Not contain special characters: "+retuenChar); //getFocus(element); return false; }else{ return true; } } //【扩展函数】获取元素值、由于checkForm函数中直接使用元素、未使用到此函数、function getElementsValue(element){ //取得表单元素的类型 var sType = element.type; switch(sType) { case "text": case "hidden": case "password": case "file": case "textarea": return element.value; case "checkbox": case "radio": return getRadioCheckboxValue(element); case "select-one": case "select-multiple": return getSelectValue(element); } //取得radio,checkbox的选中数,用"0"来表示选中的个数 function getRadioCheckboxValue(element){ var sValue = ""; //取得第一个元素的name,搜索这个元素组 var tmpels = document.getElementsByName(element.name); for(var i=0;i<tmpels .length;i++){ if(tmpels[i].checked){ sValue += "0"; } } return sValue; } //取得select的选中数,用"0"来表示选中的个数 function getSelectValue(element){ var sValue = ""; for(var i=0;i<element.options.length;i++){ if(element.options[i].selected && element.options[i].value!=""){ sValue += "0"; } } return sValue; }}//【扩展函数】获取元素焦点,由于checkForm函数中直接使用元素、未使用到此函数、function getFocus(element){ var sType = element.type; switch(sType){ case "text": case "hidden": case "password": case "file": case "textarea": element.focus();var rng = element.createTextRange(); rng.collapse(false); rng.select(); case "checkbox": case "radio": var oElements = document.getElementsByName(element.name);oElements[0].focus(); case "select-one": case "select-multiple":element.focus(); }}//效验是否全由汉字组成function checkManWord(element){//暂未实现return true;}//效验是否全由字母组成function checkWordMother(element){//暂未实现return true;}//效验邮箱格式[简单验证]function checkEmailFormat(element){var isStatus = false;var start_index = element.value.indexOf("@");var end_index = element.value.lastIndexOf("@");var last_Index = element.value.lastIndexOf(".");var value_ = element.value.substring(last_Index+1);if(start_index==end_index){isStatus = true;}else{isStatus = false;}if(start_index<last_Index){isStatus = true;}else{isStatus = false;}if(value_=="com" || value_=="cn" || value_=="net"){isStatus = true;}else{isStatus = false;}if(isStatus){return isStatus;}else{//alert("你好!你输入的 "+element.lang+" 格式不正确!请重新输入!正确格式: aaaaaaaa@163.com ");alert("Hello! You Type "+element.lang+" Please re-enter the correct format correct format: aaaaaaaa@163.com ");return isStatus;}}//效验电话格式function checkTelephoneFormat(element){//暂未实现return true;}//效验手机格式function checkPhoneFormat(element){//暂未实现return true;}//效验日期格式function checkDateFormat(element){//暂未实现return true;}//重置所有表单所有元素valuefunction resetElementValue(){var forms = document.forms;for(var i=0;i<forms.length;i++){var form = forms[i];var elements = form.elements;for(var v=0;v<elements.length;v++){var element = elements[v];if(element.type=="text" || element.type=="password" || element.type=="file" || element.type=="textarea"){element.value="";}else if(element.type=="checkbox" || element.type=="radio"){//暂未实现}else if(element.type=="select-one" || element.type=="select-multiple"){//暂未实现}else{//暂未实现 } }}}