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)方法。
  
插件的使用如下:


代码如下:

<div class="jy_fctopbox01">
<div class="jy_fctopbox02">
<div class="left">
您好,欢迎来到山水檀溪! <a href="/lpzx/LoginOut.aspx">
退出</a>
</div>
<div class="right">
<a href="http://xyfc.s187.com/Block_index.aspx?blockId=3" id="a_Into_House" target="_blank">进入楼盘首页</a></div>
</div>
</div>
<div class="jy_fcadmincenter">
<div class="jy_fcadminheader">
<div class="left">
<img src="http://img1.s187.com/Channels/House/xyfc.s187.com/BlockLogo/3/Block_Logo_3.png" id="BlockLogo" width="200" height="120" />
</div>
<div class="right">
<img src="http://img1.s187.com/Channels/House/xyfc.s187.com/BlockPropaganda/3/Block_XC_3.png" id="BlockXcImg" width="732" height="120" /></div>
</div>
<div id="jy_fcmenu">
<div class="jy_fcmenu">
<ul>
<li class='hover'>
<a href='/lpzx/BlockManager/BlockInfomation/Block_Detail.aspx'>
楼盘管理
</a></li>
<li >
<a href='/lpzx/PurchaseIntention/PurchaseIntention_List.aspx'>
购房意向
</a></li>
<li >
<a href='/lpzx/UsersProposal/BlockProposal.aspx'>
用户建议
</a></li>
<li >
<a href='/lpzx/PasswordCenter/ModifyPassword.aspx'>
修改密码
</a></li>
<li >
<a href='/lpzx/BlockManager/BlockDomainSet/SetBlockDominName.aspx'>
域名设置
</a></li>
<li >
<a href='/lpzx/UsersQuestion/QAList.aspx'>
在线问答
</a></li>
</ul>
</div>
</div>
<div id="Page_Content" class="jy_fcadmincent">
<div class="jy_fcadminleft">
<div class="ul1">
<ul>
<li><a href='/lpzx/BlockManager/BlockInfomation/Block_Detail.aspx' >
楼盘信息
</a></li>
<li><a href='/lpzx/BlockManager/BuildingInfomation/Building_List.aspx' class='hover'>
栋号信息
</a></li>
<li><a href='/lpzx/BlockManager/LayoutInfomation/Layout_List.aspx' >
户型信息
</a></li>
<li><a href='/lpzx/BlockManager/RoomInfomation/Room_List.aspx' >
套房信息
</a></li>
<li><a href='/lpzx/BlockManager/CustomerService/Customer_List.aspx' >
客服管理
</a></li>
<li><a href='/lpzx/BlockManager/BlockNews/BlockNews_List.aspx' >
楼盘动态
</a></li>
<li><a href='/lpzx/BlockManager/BlockProgress/BlockProgress_List.aspx' >
楼盘进度
</a></li>
<li><a href='/lpzx/BlockManager/SalesLicense/LicenseManager.aspx' >
预售许可证
</a></li>
<li><a href='/lpzx/BlockManager/Gallery/Block_Gallery.aspx' >
楼盘图库
</a></li>
</ul>
</div>
</div>
<div class="jy_fcadminright" id="stepDiv1">
<div class="jy_fcadmintil02">
添加栋号 >> <span>第一步</span></div>
<div class="jy_fcadmintil01">
<img src="http://images.cnblogs.com/tje_03.png" width="533" height="26" alt="" /></div>
<div class="jy_fcadminme">
<div class="right01">
<div class="jy_fcscrtbox03">
<label>
楼盘名称:
</label>
<span class="s2">
山水檀溪
</span>
</div>
<div class="jy_fcscrtbox03">
<label>
<font color="#ff0000">* </font>栋号:
</label>
<span class="s1">
<input type="text" maxlength="10" class="jy_fcadmin02" id="txtBuildingName" />
</span>
<div class="uuu1">
<p id="tipBuildingName" class="box001" style="display: none;">
</p>
</div>
</div>
<div class="jy_fcscrtbox03">
<label>
<font color="#ff0000">* </font>状态:
</label>
<div class="jy_fcscrtboxs1">
<input name="rd_SaleState" type="radio" value="1" />
待售
<input name="rd_SaleState" type="radio" value="2" />
期房
<input name="rd_SaleState" type="radio" value="3" />
现房
<input name="rd_SaleState" type="radio" value="4" />
尾房
<input name="rd_SaleState" type="radio" value="5" />
售完
</div>
<div class="uuu2">
<p id="tipSaleState" class="box001" style="display: none;">
</p>
</div>
</div>
<div class="jy_fcscrtbox03">
<label>
<font color="#ff0000">*</font> 用途:
</label>
<div class="jy_fcscrtboxs1">
<div class="jy_fcmu">
<ul>
<li>
<input type="checkbox" name="ckUsage" value="1" />普通住宅</li>
<li>
<input type="checkbox" name="ckUsage" value="2" />单身公寓</li>
<li>
<input type="checkbox" name="ckUsage" value="3" />复式</li>
<li>
<input type="checkbox" name="ckUsage" value="4" />别墅</li>
<li>
<input type="checkbox" name="ckUsage" value="5" />厂房</li>
<li>
<input type="checkbox" name="ckUsage" value="6" />写字楼</li>
<li>
<input type="checkbox" name="ckUsage" value="7" />商铺</li>
<li>
<input type="checkbox" name="ckUsage" value="8" />经济适用房</li>
</ul>
</div>
</div>
<div class="uuu2">
<p id="tipUsage" class="box001" style="display: none;">
</p>
</div>
</div>
<div class="jy_fcscrtbox03">
<label>
预售许可证:
</label>
<div class="jy_fcscrtboxs1 zoon" style="display:none">
<select id="selLicense" class="jy_fcadmin02">
</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>
</div>
</div>
<div class="jy_fcscrtbox03">
<label>
地理位置:
</label>
<div class="jy_fcscrtboxs5"><p class="c1"><a href="javascript:;" id="markMapA">地图标注</a></p><p class="c1"><ins></ins></p><p class="c1"></p>
</div>
</div>
<div class="jy_fcscrtbox03">
<label>
<font color="#ff0000">*</font> 层数:
</label>
<span class="s1">
<input maxlength="3" type="text" class="jy_fcadmin02" id="txtfloornum" />
</span>
<div class="uuu1">
<p id="tipfloornum" class="box001" style="display:none;">
</p>
</div>
</div>
<div class="jy_fcscrtbox03">
<label>
楼层说明:
</label>
<span class="s2">
<textarea id="txtBlockNote" cols="80" rows="5" class="jy_fcadmin07"></textarea>
</span>
</div>
<div class="jy_fcscrtbox03">
<label>
公摊比率:
</label>
<div class="jy_fcscrtboxs1">
<input maxlength="10" type="text" class="jy_fcadmin02" id="txtShareBili" />
</div>
<div class="uuu2">
<p id="tipShareBili" class="box001" style="display: none;">
</p>
</div>
</div>
<div class="jy_fcscrtbox03">
<label>
位置说明:
</label>
<span class="s2">
<textarea id="txtPostionDesc" cols="80" rows="5" class="jy_fcadmin07"></textarea>
</span>
</div>
<div class="jy_fcscrtbox03">
<p class="c2">
<input id="btnSubmit_Step1" type="button" class="jy_fcadminbottom02" value="下一步" />  <input
id="btnCancel_Step1" type="button" class="jy_fcadminbottom02" value="取 消" />
</p>
</div>
</div>
</div>
<div class="jy_fcadminright" id="stepDiv2" style="display: none;">
<div class="jy_fcadmintil02">
添加栋号 >> <span>第二步</span></div>
<div class="jy_fcadmintil01">
<img src="http://images.cnblogs.com/tj_03.png" width="533" height="26" /></div>
<div class="jy_fcadminme">
<div class="right01">
<div class="jy_fcscrtbox03">
<label>
占地面积:
</label>
<div class="jy_fcscrtboxs1">
<input type="text" maxlength="6" class="jy_fcadmin02" id="txtCoveredArea" />
(单位:平方米)</div>
<div class="uuu2">
<p id="tipCoveredArea" class="box001" style="display: none;">
</p>
</div>
</div>
<div class="jy_fcscrtbox03">
<label>
建筑面积:
</label>
<div class="jy_fcscrtboxs1">
<input type="text" maxlength="6" class="jy_fcadmin02" id="txtBuildingArea" />
(单位:平方米)</div>
<div class="uuu1">
<p id="tipBuildingArea" class="box001" style="display: none;">
</p>
</div>
</div>
<div class="jy_fcscrtbox03">
<label>
电梯型号:
</label>
<span class="s2">
<input type="text" maxlength="10" class="jy_fcadmin02" id="txtElevator" />
例:东芝</span>
</div>
<div class="jy_fcscrtbox03">
<label>
外墙装修:
</label>
<span class="s2">
<input type="text" maxlength="10" class="jy_fcadmin02" id="txtOutSideDecorate" />
<kbd>例:高级面砖和涂料结合</kbd></span>
</div>
<div class="jy_fcscrtbox03">
<label>
内墙装修:
</label>
<span class="s2">
<input type="text" maxlength="10" class="jy_fcadmin02" id="txtInSideDecorate" />
例:125/250厚加气混凝土砌块</span>
</div>
<div class="jy_fcscrtbox03">
<label>
基础:
</label>
<span class="s2">
<input type="text" maxlength="15" class="jy_fcadmin02" id="txtBasicFacility" />
例:管桩基础</span>
</div>
<div class="jy_fcscrtbox03">
<label>
主体结构:
</label>
<span class="s2">
<input type="text" maxlength="25" class="jy_fcadmin02" id="txtSubjectStruts" />
例:框架剪力墙结构</span>
</div>
<div class="jy_fcscrtbox03">
<p class="c2">
<input id="btnPre_Step2" type="button" class="jy_fcadminbottom02" value="上一步" />  <input type="button" id="btnSubmit_Step2" class="jy_fcadminbottom02" value="下一步" />
</p>
</div>
</div>
</div>
</div>
<div class="jy_fcadminright" id="stepDiv3" style="display: none;">
<div class="jy_fcadmintil02">
添加栋号 >> <span>第三步</span></div>
<div class="jy_fcadmintil01">
<img src="http://images.cnblogs.com/tjs_03.png" width="533" height="26" /></div>
<div class="jy_fcadminme">
<div class="jy_fcadmintable02">
<table width="100%" border="0" cellspacing="0">
<tr>
<td height="39" align="right" width="20%">
栋号图片:
</td>
<td align="left" width="20%">
<span class="s1">(最多1张)</span><a id="a_uploadBuilding" href="javascript:;"><img id="img_uploadBuilding" src="http://images.cnblogs.com/aw_07.png" width="80" height="25" align="absmiddle" alt="" /></a>
</td>
<td align="left" width="60%">
<div class="jy_fcscrtbox03">
<p id="tip_buildingFile" class="box004">
</p>
</div>
</td>
</tr>
</table>
<div id="div_BuildingContainer" class="jy_fcadminimg02">
<div style="float: left; width: 340px; height: 380px;">
<div id="ShowBuildingFlv">
</div>
</div>
</div>
<div class="jy_fcgybox005">
<input id="btnPre_Step3" type="button" class="jy_fcadminbottom02" value="上一步" />  <input type="button" id="btnSubmit_Step3" class="jy_fcadminbottom02" value="完 成" />
</div>
</div>
</div>
</div>
</div>
<div id="Page_Bottom" class="jy_fcadminbottom">
<img src="/lpzx/images/fckj_27.png" width="950" height="6" alt="" />
</div>
</div>
<br />
<p id="showMes_P"></p>
<script src="js/formValidator.js" type="text/javascript"></script>
<script src="js/formValidatorRegex.js" type="text/javascript"></script>
<script type="text/javascript">
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

时间: 2012-01-31

jQuery formValidator表单验证插件开源了 含API帮助、源码、示例

2008-07-22 14:47 bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态. 这个bug已经修复,请重新下载. 2008/7/17 14:12:00 jQuery formValidator 3.1ver 1.为inputValidator增加empty属性.用于设置控件文本值是否允许两边为空.具体请看demo1里的密码的校验代码. 该属性是个对象,默认值{leftempty:true,rightempty:tr

jQuery formValidator表单验证

作为一名程序员,在解决工作中遇到问题之后,做一些总结是有必要的,既方便总结温习相关知识点,也为广大的程序员提供了一些工作经历,给予同行一面明鉴. html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>formValidator</title> <script src="js/jq

jQuery 表单验证插件formValidation实现个性化错误提示

其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&

jquery表单验证使用插件formValidator

1.首先在项目中添加必备js与css  2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo

基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)

先上三张效果图:     这些功能在Java Web开发中可能是经常需要的,虽然很简单却使很实用的功能,这里记录下以免忘记. 1. 先说表单提交前验证:后台经常用到(这里是提交后统一验证,及时验证请参考我另一篇文章 http://blog.csdn.net/jianzhonghao/article/details/52503431) 1.1 通过submit 按钮提交后 会根据form的属性action="路径"来跳转到相应的路径,这时,给form添加一个 onsubmit =&quo

jquery validate和jquery form 插件组合实现验证表单后AJAX提交

要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件--jquery validate.js 和 jquery form.js.具体详细说明情况下文. 1.jQuery validate.js,它说白了就是一个很高尚的人为我们写好了各种表单的验证,不用我们这些童鞋去现写了,一天天的多累啊,呵呵. 2.jQuery form.js,"这个插件能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm 和 ajaxSubmi

jquery序列化form表单使用ajax提交后处理返回的json数据

1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

详解javascript表单的Ajax提交插件的使用

Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能. //ajaxForm 提交方式 $('#reg').ajaxForm(function () { alert('提交成功!'); }); 使用ajaxForm()方法,会直接实现ajax 提交.自动阻止了默认行为,而它提交的 默认页面是

jQuery validate+artdialog+jquery form实现弹出表单思路详解

功能描述: 在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证. 适用范围: 适用于在列表页面新增,修改记录. 需要加载的js文件: jquery.min.js artDialog.js iframeTools.js jquery.form.js jquery.validate.js 实现思路: 在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写

jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法

下面搜集了五种方法,主要还是前两个提供了解决方案,第三种需要修改jQuery源码: 修复jquery.validate插件中name属性相同(如name='a[]')时验证的bug 使用jQuery.validate插件http://jqueryvalidation.org/,当节点的name相同时候,脚本特意忽略剩余节点,导致所有相关节点的errMsg都显示在第一个相关节点上.这个bug在动态生成表单时候影响比较大. 通过查询资料,找到一个解决方案: http://stackoverflow.

jQuery插件Validation快速完成表单验证的方式

JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照validation定义好的规则就可以了.  •首先引入JQuery库和Validation插件:  <script type="text/javascript" src="jquery-2.2.4.min.js"></script> <s

jquery validation验证表单插件

jQuery验证表单插件--jquery-validation The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.       --官方介绍 validation使用步骤 引入jQuery库和validation插件 如果需要官方的

jQuery Validate 相关参数及常用的自定义验证规则

Jquery Validate 相关参数 //定义中文消息 var cnmsg = { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字",

jQuery实现form表单基于ajax无刷新提交方法详解

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

jQuery实现form表单基于ajax无刷新提交方法实例代码

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o