jQuery表单验证插件formValidator(改进版)_Javascript教程-查字典教程网

枚举对象的使用：

复制代码代码如下:

//各种验证方式支持的标签类型

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)方法。

插件的使用如下：

复制代码代码如下:

<div>

您好，欢迎来到山水檀溪！ <a href="/lpzx/LoginOut.aspx">

退出</a>

</div>

<div>

<a href="http://xyfc.s187.com/Block_index.aspx?blockId=3" id="a_Into_House" target="_blank">进入楼盘首页</a></div>

</div>

<div>

</div>

<div>

</div>

<div>

<ul>

<li>

楼盘管理

</a></li>

<li >

购房意向

</a></li>

<li >

用户建议

</a></li>

<li >

修改密码

</a></li>

<li >

域名设置

</a></li>

<li >

在线问答

</a></li>

</ul>

</div>

<div>

<ul>

楼盘信息

</a></li>

栋号信息

</a></li>

户型信息

</a></li>

套房信息

</a></li>

客服管理

</a></li>

楼盘动态

</a></li>

楼盘进度

</a></li>

预售许可证

</a></li>

楼盘图库

</a></li>

</ul>

</div>

<div>

添加栋号 >> <span>第一步</span></div>

<div>

<div>

<label>

楼盘名称：

</label>

<span>

山水檀溪

</span>

</div>

<div>

<label>

<font color="#ff0000">* </font>栋号：

</label>

<span>

</span>

<div>

</p>

</div>

<div>

<label>

<font color="#ff0000">* </font>状态：

</label>

<div>

待售

期房

现房

尾房

售完

</div>

<div>

</p>

</div>

<div>

<label>

<font color="#ff0000">*</font> 用途：

</label>

<div>

<ul>

<li>

<li>

<li>

<li>

<li>

<li>

<li>

<li>

<input type="checkbox" name="ckUsage" value="8" />经济适用房</li>

</ul>

</div>

<div>

</p>

</div>

<div>

<label>

预售许可证：

</label>

<div>

</select></div>

<div><p><a href="javascript:;" id="lookSelLicenseA">[查看内容]</a></p><p><ins id="License_empty_Ins">无</ins></p><p><a href="javascript:;"

title="如不存在此建筑物的预售许可证，可点击添加！">添加</a></p>

</div>

<div>

<label>

地理位置：

</label>

</div>

<div>

<label>

<font color="#ff0000">*</font> 层数：

</label>

<span>

</span>

<div>

</p>

</div>

<div>

<label>

楼层说明：

</label>

<span>

</span>

</div>

<div>

<label>

公摊比率：

</label>

<div>

</div>

<div>

</p>

</div>

<div>

<label>

位置说明：

</label>

<span>

</span>

</div>

<div>

<p>

<input id="btnSubmit_Step1" type="button" value="下一步" /><input

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

</p>

</div>

<div>

添加栋号 >> <span>第二步</span></div>

<div>

<div>

<label>

占地面积：

</label>

<div>

(单位:平方米)</div>

<div>

</p>

</div>

<div>

<label>

建筑面积：

</label>

<div>

(单位:平方米)</div>

<div>

</p>

</div>

<div>

<label>

电梯型号：

</label>

<span>

例：东芝</span>

</div>

<div>

<label>

外墙装修：

</label>

<span>

<kbd>例：高级面砖和涂料结合</kbd></span>

</div>

<div>

<label>

内墙装修：

</label>

<span>

例：125/250厚加气混凝土砌块</span>

</div>

<div>

<label>

基础：

</label>

<span>

例：管桩基础</span>

</div>

<div>

<label>

主体结构：

</label>

<span>

例：框架剪力墙结构</span>

</div>

<div>

<p>

</p>

</div>

<div>

添加栋号 >> <span>第三步</span></div>

<div>

<div>

<tr>

栋号图片：

</td>

</td>

<div>

</p>

</div>

</td>

</tr>

</table>

<div>

</div>

<div>

</div>

</div>

<br />

function GetInitConfigOptions(validatorgroup, onsuccess, submitbutton, getformdata) {

return {

validatorgroup: validatorgroup,

formid: "form1",

onerror: function (msg) { alert("onerror is " + msg) },

onsuccess: onsuccess,

submitbutton: submitbutton,

tipcss: {

//(ajax)加载处理

loadCss: "",

//获得焦点时的样式

focusCss: "",

//提示

noticeCss: "box001",

//成功

successCss: "box002",

//失败

errorCss: "box003",

//默认状态

defaultCss: "box004"

getformdata: getformdata

};

}

//显示指定的(步)容器

function _ShowStepContainer(showNum) {

for (var i = 1; i <= 3; i++) {

$("div#stepDiv" + i).css("display", (i == showNum ? "block" : "none"));

}

$(document).ready(function () {

$("p").show();

$.formValidator.initConfig(

GetInitConfigOptions(1, function () {

_ShowStepContainer(2);

}, "btnSubmit_Step1")

);

$("#txtBuildingName").formValidator(

{

validatorgroup: "1",

tipid: "tipBuildingName",

onshow: "请输入栋号",

onfocus: "栋号不能为空",

oncorrect: "",

tipcss: //此对象中的属性继承(extend)其对应的initConfig.tipcss的属性

{

//失败

//errorCss: "onNotice"

}

})

.inputValidator({ min: 2, max: 10, onerror: "你输入的栋号(长度错误),请确认" });

$("#txtfloornum").formValidator({ tipid: "tipfloornum", onshow: "请输入层数", onfocus: false, oncorrect: "层数输入正确" }).inputValidator({ min: 1, max: 30, type: "value", empty: { leftempty: false, rightempty: false, emptyerror: "层数两边不能有空符号" }, onerror: "层数不能为空,值介于1-30之间" })

.regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的层数格式不正确,必须为数字" });

$('input[name="rd_SaleState"]:radio').formValidator({ tipid: "tipSaleState", onshow: "请选择售楼状态", onfocus: "栋号的售楼状态", oncorrect: "" }).inputValidator({ min: 1, onerror: "售楼状态必选!" });

$('input[name="ckUsage"]:checkbox').formValidator({ tipid: "tipUsage", forcevalid: true, onshow: "请选择用途", onfocus: false, oncorrect: "用途已选择" }).inputValidator({ min: 1, onerror: "请选择用途,必填" });

$("#txtShareBili").formValidator({ tipid: "tipShareBili", onshow: "请输入公摊比率", oncorrect: "" }).inputValidator({ min: 1, onerror: "公摊比率不能为空" }).regexValidator({ regexp: RegexEnum.decmal_Z, onerror: "你输入的公摊比率格式不正确,必须为数字" });

$.formValidator.initConfig(

GetInitConfigOptions(2, function () {

_ShowStepContainer(3);

}, "btnSubmit_Step2")

);

$("#txtCoveredArea").formValidator({ validatorgroup: "2", tipid: "tipCoveredArea", onshow: "请输入占地面积", onfocus: false, oncorrect: "占地面积输入正确" }).inputValidator({ min: 1, onerror: "占地面积不能为空" })

.regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的占地面积格式不正确,必须为数字" });

$("#txtBuildingArea").formValidator({ validatorgroup: "2", tipid: "tipBuildingArea", onshow: "请输入建筑面积", onfocus: false, oncorrect: "建筑面积输入正确" }).inputValidator({ min: 1, onerror: "建筑面积不能为空" })

.regexValidator({ regexp: RegexEnum.integer_Z, onerror: "你输入的建筑面积格式不正确,必须为数字" });

$.formValidator.initConfig(

GetInitConfigOptions(3, function () {

alert("验证通过"); return true;

}, "btnSubmit_Step3", function (formdata) {

alert("要提交的表单值："+$.param(formdata));

for (var key in formdata) {

$("#showMes_P").html($("#showMes_P").html() + "<br/>key:" + key + " | val:" + formdata[key]);

}

})

);

});

</script>

上面就是我对此插件主要改进的介绍，插件整体还是保持原版本的结构和思想，所做的无非是让插件可读性和易用性等更好，今天分享出来，也是希望有更多的朋友能帮忙测试看看，提些自己的意见或想法，让这个表单验证插件formValidator能更好用(不断的改进才能做到更好，改进离不开大家的建议)！

补充：需要解决改进的功能——验证可支持自由组合，如：电话和手机只用验证其中的一个通过即可. 这个我自己尝试实现过，但效果不理想，没有想到一个比较好的解决方法，希望大家能帮忙考虑下！

插件和Demo下载：FromVaild