中文api 地址 ?http://code.ciaoca.com/jquery/validation-engine/? ?和bootstarp 一起使用不會像easyui ?驗證那樣生硬

修改版

原版 包涵實例代碼
這里記錄幾點ps：驗證規則?validate[required] 必須要加上required ，其它加的自定義規則才會生效

$('#id').validationEngine('validate') 直接調用驗證不會驗證異步 ?一直都是false，如果不考慮使用異步或自己實現異步，可以考慮使用該方法驗證

解決方法：1.不使用$('#id').validationEngine('validate')的方法

$addDiv.find('#addForm').submit();

提交

$addDiv.find('#addForm').validationEngine({

maxErrorsPerField:1,

ajaxFormValidation: true,

onBeforeAjaxFormValidation: function(){

$addDiv.find('#addForm').attr("action","#");//這是把action修改為#是防止表單多次提交

$.post((baseURL+'/housemanage/nhousegroupdef/add'),$($addDiv.find('#addForm')).serialize(),function(rec){

if(rec.code == "0"){

$.msg.success("新增成功！");

nhousegroupdefglobal.sbtable.bootstrapTable("removeAll")

nhousegroupdefglobal.sbtable.bootstrapTable('refresh');

$addDiv.modal("hide")

}else{

$.msg.fail(rec.desc);

}

},"json").error(function(){

$.msg.fail("新增失敗！");

});

}

});

在 初始化屬性onBeforeAjaxFormValidation 定義提交前并驗證完畢的方法即可
自定義規則的方法

$.validationEngineLanguage.allRules.switch={

"func": function(field,rules,i,options){

if(!$(field).val()){

return false;

}

return true;

},

"alertText": "* 請選擇內容"

}

$.validationEngineLanguage.allRules.datecompare={

"func": function(field,rules,i,options){

if($('#regEndtime').val()&&$('#regBegintime').val()>$('#regEndtime').val()){

return false;

}

return true;

},

"alertText": "* 報名開始時間不能大于報名截止時間，請修改！"

}

$.validationEngineLanguage.allRules.lookhousedatecompare={

"func": function(field,rules,i,options){

if($('#regEndtime').val()&&$('#lookhousetime').val()<$('#regEndtime').val()){

return false;

}

return true;

},

"alertText": "* 看房時間必須大于報名截止時間，請修改！"

}

$.validationEngineLanguage.allRules.numcompare={

"func": function(field,rules,i,options){

if($('#maxNum').val()&&$('#minNum').val()>$('#maxNum').val()){

return false;

}

return true;

},

"alertText": "* 成團最低人數必須不能大于成團最高人數，請修改！"

}

$.validationEngineLanguage.allRules.lookhousenameajax={

"url": baseURL+"/housemanage/nhousegroupdef/vaild/lookhousename",

"alertText": "* 看房團名稱已被其它用戶定義過，請修改！",

"alertTextLoad": "* 正在確認名稱是否有其他人使用，請稍等。"

}

建議采用上面的方法 ，不用修改 原生的文件，直接在$.validationEngineLanguage.allRules 屬性上擴展規則即可也可采用繼承的方法

$.extend($.validationEngineLanguage.allRules,{

switch:{

"func": function(field,rules,i,options){

if(!$(field).val()){

return false;

}

return true;

},

"alertText": "* 請選擇內容"

}

});

注意如果使用框架自帶的ajax驗證 后臺代碼返回

@RequestMapping("/vaild/lookhousename")

@ResponseBody

public Object vaildLookHouseName()throws Exception{

String fieldId = RequestUtil.getRequestParameter("fieldId");

String fieldValue = RequestUtil.getRequestParameter("fieldValue");

String backstr = RequestUtil.getRequestParameter("backstr");

Object[] ret = null;

try {

if(backstr.equalsIgnoreCase(fieldValue)){

ret = new Object[]{fieldId,true};

}else{

if(nhousegroupdefService.hasLookHouseName(fieldValue)){

ret = new Object[]{fieldId,false};

}else{

ret = new Object[]{fieldId,true};

}

}

}catch (Exception e){

e.printStackTrace();

logger.error(e.getMessage(), e);

}

return ret;

}

2..使用$('#id').validationEngine('validate')的方法 ， 由于使用自帶的ajax需要動態傳入兩個參數的話

ps：不使用原框架對ajax自定義驗證的時候1.如果要跟框架一樣提示的風格，成功就要消除錯誤信息，如果要隱藏錯誤框，使用：$('#ysfyHouse').parent().find("div[class=formError]").css({opacity: 0}) 并不會沖突的話設置透明度，原框架就是這么弄的,找遍了ajax不設置隱藏框的方法，都不合適 ，最后只能妥協加隱藏框，點保存的時候確認隱藏框的值

2.如果直接alert()的話 ，就只需要設置隱藏框就可以了

$('#ysfyHouse').on('blur', function(){

if(!$(this).val()||$('#ysfyHouse').validationEngine('validate')){ //必須等元素驗證完畢才能執行下一步

return;

}

$.post((baseURL+'/housemanage/nhousegroupdef/vaild/lookhousejoin'),{houseid:($("#ysfyHouseid").val()),groupid:(page_exchange_moudel.id)},function(rec){

if(rec.code == "0"){

if(rec.data.result){

$('#ysfyHouse').validationEngine('showPrompt','樓盤已重復，請修改！','error');

$("#ysfyHouseidajaxval").val("1")

}else{

$('#ysfyHouse').validationEngine('showPrompt','成功！','pass');

$("#ysfyHouseidajaxval").val("0")

}

}else{

alert(rec.desc);

}

},"json").error(function(){

alert("請求失敗！");

});

})

附件列表

?

轉載于:https://www.cnblogs.com/signheart/p/6599854.html

總結

以上是生活随笔為你收集整理的jquery 悬浮验证框架 jQuery Validation Engine的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。