validationEngine給我們為前端的表單驗證減少了很大的工作量.大部分情況我們使用validationEngine驗證表單的形式有幾種方式:
1 使用正常的表單提交.這種情況validationEngine驗證不通過是不會提交表單的.
2 使用ajax提交表單,但是沒有使用ajax驗證.
這種方式也比較簡單,在我們使用ajax請求前檢查驗證是否通過就可以,例如:
代碼如下:
//驗證不通過時return
if(!$("form#ajaxForm").validationEngine("validate")) return ;
$.ajax({
type: "POST",
url: $("#ajaxForm").attr("action"),
data: $("#ajaxForm").serialize(),
dataType: "html",
success: function(data){
xxxx }
});
3 使用正常表單提交,但是有使用ajax驗證,這種方式有點讓人糾結了.當我們提交表單時ajax驗證不通過也能提交表單,關於這種情況,網上很多例子是改源碼的,下面是截圖:
.這種方法對於目前這種情況可行,這種修改的方式本身就不建議,可能對其它地方產生影響.我發現的其中一個就是當下面這種情況時:
代碼如下:
function beforeCall(form,options){
if(window.console){
console.log("表單提交驗證通過後，Ajax 提交之前的回調");
};
return true;
};
//
function ajaxValidationCallback(status,form,json,options){
if(window.console){
console.log(status);
};
if(status === true){
alert("the form is valid!");
}
};
jQuery(document).ready(function(){
jQuery("#formID").validationEngine({
ajaxFormValidation: true, //是否使用 Ajax 提交表單
ajaxFormValidationMethod: 'post', //設置 Ajax 提交時，發送數據的方式
onAjaxFormComplete: ajaxValidationCallback, //表單提交，Ajax 驗證完成後
onBeforeAjaxFormValidation: beforeCall //表單提交驗證通過後，Ajax 提交之前的回調
});
});
beforeCall 這個方法是不會調用的是不會調用的,所以還是不能使用
4 使用ajax驗證並且使用ajax提交表單,這個方式就讓人糾結了,上面修改源碼的方式就不好用了.
對於第三種和第四種方式,解決方式如下:
在使用ajax驗證的表單form標簽上加上自定義屬性control="userName,email" 屬性值為要使用ajax驗證的控件id(多個控件使用逗號分隔開).
代碼如下:
<form method="post" id="ajaxForm2Controls" action="admin/user/savePro.htm" control="userName">
在每個需要驗證的控件上加上兩個屬性url(ajax請求的地址)和errror(不通過時的提示信息)
代碼如下:
<input class="textBox validate[required,minSize[6],maxSize[128],custom[onlyLetterNumber]]" type="text" name="userName" id="userName" maxlength="128" url="admin/user/uniqueName.htm" error="用戶已存在..."/>
javascript當中聲明兩個全局數組
代碼如下:
var controlId = new Array(); //保存驗證不通過的控件ID
var errors = new Array() ; //保存驗證不通過的提示信息
思路是這個的獲取form標簽上的control屬性上的值(使用逗號分隔獲取每個控件ID),使用ajax遍歷請求,當驗證不通過時 將控件ID和提示信息添加到controlId 和 errors 中,並且提示信息.當提交表單時判斷controlId 是否為空,不為空則循環顯示提示信息.
代碼如下:
$(function() {
var ajaxForm2Controls = $("form#ajaxForm2Controls") ;
//表單提交時
$(ajaxForm2Controls).submit(function() {
ajaxForm2Control(ajaxForm2Controls) ;
return false ;
}) ;
//失去焦點時驗證控件
valControls(ajaxForm2Controls) ;
});
表單提交方法:
代碼如下:
function ajaxForm2Control(obj) {
//當存在錯誤信息時返回,找顯示錯誤信息
if(controlId.length > 0) {
alertinfo() ;
return false ;
}
if(!$(obj).validationEngine("validate")) return false; //驗證沒有使用ajax驗證的控件(不是ajax驗證的字段是可以正常驗證的, 不通過就返回)
$.ajax({
type: "POST",
url: $(obj).attr("action"),
data: $(obj).serialize(),
dataType: "html",
success: function(data){
xxxxxx
}
});
}
為表單添加焦點事件
代碼如下:
//表單需要驗證的控件
function valControls(ajaxForm2Controls) {
//獲取需要使用ajax驗證的控件
var controlsStr = ajaxForm2Controls.attr("control") ;
//屬性未定義時返回
if(typeof(controlsStr) === "undefined" || controlsStr.length <= 0) return ;
//分隔獲取控件ID
var controls = controlsStr.split(/,/g) ;
for(var i in controls) {
//添加焦點離開事件
$("#" + controls[i]).blur(function() {
if($(this).val().length <= 0) return false;
//重新設置數組
controlId.length = 0;
errors.length = 0 ;
//錯誤信息
var error = $(this).attr("error") ;
$.ajax({
type: "GET",
url: $(this).attr("url"),
data: $(this).serialize(),
dataType: "text",
success: function(data){
if(data==="true") {
//驗證不通過將錯誤信息放入數組中
controlId.push(controls[i]);
errors.push(error) ;
//提示信息
alertinfo() ;
}
}
});
}) ;
}
}
錯誤提示信息:
代碼如下:
//彈出信息
function alertinfo() {
if(controlId.length > 0) {
for(var i in controlId) {
//validationEngine方法,為指定ID彈出提示.
//用法:<span style="">$("#id").validationEngine("showPrompt","提示內容","load");
//<span style="">在該元素上創建一個提示，3 種狀態："pass", "error", "load"</span></span>
$("#" + controlId[i]).validationEngine("showPrompt", errors[i], "error");
}
}
}
這樣當我們無論是第三種方式還是第四種方式提交表單,提交前調用controlId是否有值就可以了.