jQuery表单验证插件formValidator(改进版)

枚举对象的使用：

 
//各种验证方式支持的标签类型 
sustainType: function (elem, setting) { 
var srcTag = elem.tagName; 
var stype = elem.type; 
switch (setting.validatetype) { 
case _validTypeEnum.InitValidator: 
return true; 
case _validTypeEnum.InputValidator: 
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA || srcTag == _validTagEnum.SELECT) { 
return true; 
} else { 
return false; 
} 
case _validTypeEnum.CompareValidator: 
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) { 
if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) { 
return false; 
} else { 
return true; 
} 
} 
return false; 
case _validTypeEnum.AjaxValidator: 
if (stype == _validTagTypeEnum.text || stype == _validTagTypeEnum.textarea || stype == _validTagTypeEnum.file || stype == _validTagTypeEnum.password || stype == _validTagTypeEnum.select_one) { 
return true; 
} else { 
return false; 
} 
case _validTypeEnum.RegexValidator: 
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) { 
if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) { 
return false; 
} else { 
return true; 
} 
} 
return false; 
case _validTypeEnum.FunctionValidator: 
return true; 
} 
} 

复制代码代码如下:

 
//获取指定字符串的长度 
getLength: function (jqObj) { 
var elem = _GetDomObj(jqObj); 
var sType = elem.type; 
var len = 0; 
switch (sType) { 
case _validTagTypeEnum.text: 
case _validTagTypeEnum.hidden: 
case _validTagTypeEnum.password: 
case _validTagTypeEnum.textarea: 
case _validTagTypeEnum.file: 
var val = jqObj.val(); 
var initConfig = $.formValidator.getInitConfig(elem.settings[0].validatorgroup); 
len = initConfig.wideword ? String.getCharLength(val) : val.length; 
break; 
case _validTagTypeEnum.checkbox: 
case _validTagTypeEnum.radio: 
len = $("input[type='" + sType + "'][name='" + jqObj.attr("name") + "']:checked").length; 
break; 
case _validTagTypeEnum.select_one: 
case _validTagTypeEnum.select_multiple: 
len = jqObj.children(":selected").length; 
break; 
} 
return len; 
} 

2. 将原版本中各方法之间传递验证标签的Id，改为传递验证标签的对象，这样就避免了在各个方法内需要再根据id获得验证标签的对象，提高了代码执行速度和性能。
3. 原版本中对验证成功、错误等提示样式在插件中把样式名给限定死了，如错误的提示样式名为：onError，这样在使用此插件时就会让美工需要关心插件中各提示样式的名称，并且还要避免出现样式重复或冲突的情况，如此使用让人很不爽。真正好的插件，应该是让js和(需要用户自己设置的)样式完全分离——这类似于编程里的'松耦合'，但这样才能让js和样式无不依赖，更好的适应用户的需求! 于是，我将插件中各提示样式(作为方法的参数对象的属性)让用户可以自己配置，主要代码如下：

复制代码代码如下:

 
//提示样式枚举 
var _tipCssEnum = 
{ 
//(ajax)加载处理 
loadCss: "loadCss", 
//获得焦点时的样式 
focusCss: "focusCss", 
//提示[用于 为空提示] ---如果此项未设置，则使用errorCss 
noticeCss: "noticeCss", 
//失败or错误[用于格式错误，正则表达式验证]---必须设置 
errorCss: "errorCss", 
//成功---必须设置 
successCss: "successCss", 
//默认状态 ---必须设置 
defaultCss: "defaultCss" 
}; 
initConfig: function (controlOptions) { 
var settings = 
{ 
debug: false,//是否是调试模式 
validatorgroup: "1",//验证组 
alertmessage: false,//是否直接弹出验证提示 
validobjectids: "",//验证对象集合 
focusvalid: false, 
onsuccess: function () { return true; }, //验证成功后的处理方法,返回true|false(可追加表单验证或阻止表单提交等) 
onerror: function () { }, 
filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str); }, //过虑输入字符串的方法[可设置] 
isformpost: false, //是否是表单提交(默认：false——非表单提交,一般为ajax提交,true——表单提交) 
submitonce: false,//是否验证通过后，表单立刻提交 
submitbutton: null,//提交按钮id或对象 
getformdata: null, //function (formdata) { } (验证通过后)获得输入的表单值——只有isformpost=false时，此方法才会被调用 
//验证提示显示设置(default:默认根据设置) 
tipshow: "default", 
formid: "", //验证表单的id或对象 
tidymode: false, //精简模式 
errorfocus: true, 
wideword: true, 
//验证提示样式设置(全局) 
tipcss: 
{ 
//(ajax)加载处理 
loadCss: "", 
//获得焦点时的样式 
focusCss: "", 
//提示 
noticeCss: "", 
//成功 
successCss: "", 
//失败 
errorCss: "", 
//默认状态 
defaultCss: "" 
} 
}; 
controlOptions = controlOptions || {}; 
controlOptions.tipcss = controlOptions.tipcss || {}; 
//合并整个配置(深度拷贝) 
$.extend(true, settings, controlOptions); 
if (!settings.isformpost) { 
if (!settings.submitbutton) { 
alert("submitbutton不能为空！"); 
return; 
} 
_GetJqObj(settings.submitbutton).click(function () { 
var pageIsValid = $.formValidator.pageIsValid(settings.validatorgroup); 
if (pageIsValid && _IsFunction(settings.getformdata)) { 
var formData = _GetFormData(settings.filterInputStrFun); 
settings.getformdata(formData); 
} 
}); 
} 
settings.tipshow = settings.tipshow || "default"; 
//如果是精简模式，发生错误的时候，第一个错误的控件就不获得焦点 
if (settings.tidymode) { 
settings.errorfocus = false; 
} 
if (settings.formid) { 
_GetNodeById(settings.formid).submit(function () { 
//如果不是表单提交，则阻止表单提交 
return settings.isformpost ? $.formValidator.pageIsValid(settings.validatorgroup) : false; 
}); 
} 
if (_jQuery_formValidator_initConfig_Array == null) { 
_jQuery_formValidator_initConfig_Array = new Array(); 
} 
_jQuery_formValidator_initConfig_Array.push(settings); 
} 
//设置提示信息 
setTipState: function (elem, showCssEnum, showmsg) { 
var setting0 = elem.settings[0]; 
var initConfig = $.formValidator.getInitConfig(setting0.validatorgroup); 
if (initConfig.alertmessage && showmsg) { 
alert(showmsg); 
return 
} 
var jq_tipObj = setting0.tipJqObj; 
var tip_IsNull = Object.isNull(jq_tipObj); 
if (!tip_IsNull) { 
showmsg = showmsg || ""; 
if (initConfig.tidymode) { 
//保存提示信息 
elem.Tooltip = showmsg; 
if (showCssEnum != _tipCssEnum.errorCss && showCssEnum != _tipCssEnum.noticeCss) 
jq_tipObj.hide(); 
} 
jq_tipObj.removeClass(); 
//设置提示样式 
var showClass = setting0.tipcss[showCssEnum]; 
//如果 noticeCss未设置，则使用 errorCss 
if (String.isNullOrEmpty(showClass) && showCssEnum == _tipCssEnum.noticeCss) { 
showCssEnum = _tipCssEnum.errorCss; 
showClass = setting0.tipcss[showCssEnum]; 
} 
if (!String.isNullOrEmpty(showClass)) { 
//保存 当前提示标签 显示的样式(枚举值) 
elem.showcssenum = showCssEnum; 
jq_tipObj.addClass(showClass); 
} 
jq_tipObj.html(showmsg); 
} 
} 

　　4.在initConfig配置对象中增加了一些属性，以满足更多的需求，增强功能和易用性，如：
　　filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str); }, //过虑输入字符串的方法[可设置] 　——以满足对输入字符串过虑的需求
　　isformpost: false, //是否是表单提交(默认：false——非表单提交,一般为ajax提交,true——表单提交) ——以满足ajax提交和表单提交的需求
　　getformdata: null, //function (formdata) { } (验证通过后)获得输入的表单值——只有isformpost=false时，此方法才会被调用
　　tipshow: "default",//验证提示显示设置(default:默认根据设置) ——设置验证提示标签对象查找方式，根据Id 或自定义jQuery查找(find)方法。
　　
插件的使用如下：

复制代码代码如下:

您好，欢迎来到山水檀溪！
退出

进入楼盘首页

上面就是我对此插件主要改进的介绍，插件整体还是保持原版本的结构和思想，所做的无非是让插件可读性和易用性等更好，今天分享出来，也是希望有更多的朋友能帮忙测试看看，提些自己的意见或想法，让这个表单验证插件formValidator能更好用(不断的改进才能做到更好，改进离不开大家的建议)！
　　补充：需要解决改进的功能——验证可支持自由组合，如：电话和手机只用验证其中的一个通过即可. 这个我自己尝试实现过，但效果不理想，没有想到一个比较好的解决方法，希望大家能帮忙考虑下！
插件和Demo下载：FromVaild

jQuery表单验证插件formValidator(改进版)_jquery