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(多個控制項使用逗號分隔開).
在每個需要驗證的控制項上加上兩個屬性url(ajax請求的位址)和errror(不通過時的提示訊息)
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
//分隔取得控制項ID
var controls = controlsStr.split(/,/g) ;
for(var i in controls) {
//新增焦點離開事件
$("#" controls[i]).blur(function() {
if($(this).val().length
//重新設定陣列
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彈出提示.
//用法:$("#id").validationEngine("showPrompt","提示內容
//在該元素上建立一個提示，3 種狀態：「
$("#" controlId[i]).validationEngine("showPrompt", errors[i], "error");
}
}
}
這樣當我們無論是第三種方式還是第四種方式提交表單,提交前調用controlId是否有值就可以了.
