Heim > Web-Frontend > js-Tutorial > jQuery表单验证插件formValidator(改进版)_jquery

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

WBOY
Freigeben: 2016-05-16 17:56:45
Original
1279 Leute haben es durchsucht

枚举对象的使用:

复制代码 代码如下:

//各种验证方式支持的标签类型
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)方法。
  
插件的使用如下:
复制代码 代码如下:




您好,欢迎来到山水檀溪!
退出











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







添加栋号 >> 第一步








山水檀溪















待售

期房

现房

尾房

售完











  • 普通住宅


  • 单身公寓


  • 复式


  • 别墅


  • 厂房


  • 写字楼


  • 商铺


  • 经济适用房














































  id="btnCancel_Step1" type="button" class="jy_fcadminbottom02" value="取 消" />



















上面就是我对此插件主要改进的介绍,插件整体还是保持原版本的结构和思想,所做的无非是让插件可读性和易用性等更好,今天分享出来,也是希望有更多的朋友能帮忙测试看看,提些自己的意见或想法,让这个表单验证插件formValidator能更好用(不断的改进才能做到更好,改进离不开大家的建议)!
  补充:需要解决改进的功能——验证可支持自由组合,如:电话和手机 只用验证其中的一个通过即可. 这个我自己尝试实现过,但效果不理想,没有想到一个比较好的解决方法,希望大家能帮忙考虑下!
插件和Demo下载:FromVaild
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage