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

　　插件的使用如下：

复制代码代码如下:

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

　　退出</a>

　　</div>

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

　　</div>

　　</div>

　　</div>

　　<ul>

　　楼盘管理

　　</a></li>

　　<li >

　　购房意向

　　</a></li>

　　<li >

　　用户建议

　　</a></li>

　　<li >

　　修改密码

　　</a></li>

　　<li >

　　域名设置

　　</a></li>

　　<li >

　　在线问答

　　</a></li>

　　</ul>

　　</div>

　　<ul>

　　楼盘信息

　　</a></li>

　　栋号信息

　　</a></li>

　　户型信息

　　</a></li>

　　套房信息

　　</a></li>

　　客服管理

　　</a></li>

　　楼盘动态

　　</a></li>

　　楼盘进度

　　</a></li>

　　预售许可证

　　</a></li>

　　楼盘图库

　　</a></li>

　　</ul>

　　</div>

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

　　<label>

　　楼盘名称：

　　</label>

　　山水檀溪

　　</span>

　　</div>

　　<label>

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

　　</label>

　　</span>

　　</p>

　　</div>

　　<label>

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

　　</label>

　　待售

　　期房

　　现房

　　尾房

　　售完

　　</div>

　　</p>

　　</div>

　　<label>

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

　　</label>

　　<ul>

　　<li>

　　<li>

　　<li>

　　<li>

　　<li>

　　<li>

　　<li>

　　<li>

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

　　</ul>

　　</div>

　　</p>

　　</div>

　　<label>

　　预售许可证：

　　</label>

　　</select></div>

　　<div class="jy_fcscrtboxs5"><p class="c1"><a href="javascript:;" id="lookSelLicenseA">[查看内容]</a></p><p class="c1"><ins style="color: black;" id="License_empty_Ins">无</ins></p><p class="c1"><a href="javascript:;" onclick="PreSellLicensePopUp.Open();return false;"

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

　　</div>

　　<label>

　　地理位置：

　　</label>

　　</div>

　　<label>

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

　　</label>

　　</span>

　　</p>

　　</div>

　　<label>

　　楼层说明：

　　</label>

　　</span>

　　</div>

　　<label>

　　公摊比率：

　　</label>

　　</div>

　　</p>

　　</div>

　　<label>

　　位置说明：

　　</label>

　　</span>

　　</div>

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

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

　　</p>

　　</div>

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

　　<label>

　　占地面积：

　　</label>

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

　　</p>

　　</div>

　　<label>

　　建筑面积：

　　</label>

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

　　</p>

　　</div>

　　<label>

　　电梯型号：

　　</label>

　　例：东芝</span>

　　</div>

　　<label>

　　外墙装修：

　　</label>

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

　　</div>

　　<label>

　　内墙装修：

　　</label>

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

　　</div>

　　<label>

　　基础：

　　</label>

　　例：管桩基础</span>

　　</div>

　　<label>

　　主体结构：

　　</label>

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

　　</div>

　　</p>

　　</div>

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

　　<tr>

　　栋号图片：

　　</td>

　　</td>

　　</p>

　　</div>

　　</td>

　　</tr>

　　</table>

　　</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

教程首页更多教程