当前位置:Gxlcms > JavaScript > jQuery表单验证插件formValidator(改进版)_jquery

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

时间:2021-07-01 10:21:17 帮助过:5人阅读

枚举对象的使用:
代码如下:

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




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


进入楼盘首页
















  • 楼盘管理



  • 购房意向



  • 用户建议



  • 修改密码



  • 域名设置



  • 在线问答









  • 楼盘信息


  • 栋号信息


  • 户型信息


  • 套房信息


  • 客服管理


  • 楼盘动态


  • 楼盘进度


  • 预售许可证


  • 楼盘图库






添加栋号 >> 第一步








山水檀溪















待售

期房

现房

尾房

售完











  • 普通住宅


  • 单身公寓


  • 复式


  • 别墅


  • 厂房


  • 写字楼


  • 商铺


  • 经济适用房











[查看内容]

title="如不存在此建筑物的预售许可证,可点击添加!">添加







地图标注




































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