關(guān)于jquery.validate1.9.0前臺驗證的使用介紹
一、利用jquery.form插件提交表單方法使用jquery.validate插件
現(xiàn)象:當(dāng)提交表單時,即使前臺未驗證通過,也照常提交表單。
解決辦法:
$('#myForm').submit(function(){
if (!$(this).valid()) return false;//加上此句OK
$('.error').html('');
$("#go").prop("disabled",true);
$(this).ajaxSubmit({
type:"POST",
//beforeSubmit: showRequest,
dataType:'json',
success: showResponse
});
return false;
});
相關(guān)說明:
定制提交方式(ajax提交)
如果使用ajax方式提交,那請采用如下兩種方式和校驗框架結(jié)合
1)、使用submitHandler屬性配置ajax提交,submithandler:當(dāng)表單全部校驗通過之后會回調(diào)配置的代碼,此處也就是當(dāng)校驗通過之后調(diào)用ajax提交。
2)、使用valid方法,監(jiān)聽form的submit事件,當(dāng)$('#form').valid()返回true的時候再提交。
通過監(jiān)聽form的submit事件,對form進行ajax提交。示例完整代碼如下:
$(document).ready(function(){
$('#myForm').submit(function(){
if (!$(this).valid()) return false;
$('.error').html('');
$("#go").prop("disabled",true);
$(this).ajaxSubmit({
type:"POST",
//beforeSubmit: showRequest,
dataType:'json',
success: showResponse
});
return false;
});
var validator = $("#myForm").validate({
rules: {
username: "required",
email: {
required: true,
email: true
}
},
messages: {
username: "請輸入姓名",
email: {
required: "請輸入Email地址",
email: "請輸入正確的email地址"
}
}
});
});
function showResponse(jsonData,statusText)
{
if(statusText=='success')
{
$("#go").prop("disabled",false);
if (jsonData.status == 1)
{
$("#return").html(jsonData.message);
}
else
{
$.each(jsonData.errors, function(k,v){
//$('#output').find('ul').append('<li>' + v + '</li>');
$('.e_' + k).html(v);
});
}
}
}
二、控制錯誤信息位置的方法
現(xiàn)象一:
我在注冊表單新加了一個驗證碼。驗證結(jié)果錯誤時,這個錯誤信息跑到驗證碼前面去了。如下圖所示:

目的:讓錯誤信息在驗證碼后面
現(xiàn)象二:

上圖中的紅色提示內(nèi)容,我想移到 (* 必填) 的后面。
上面兩個現(xiàn)象,可通過jquery.validate自帶的控制錯誤信息位置的方法——'errorPlacement',使用也很方便:
errorPlacement: function(error, element)
{
error.appendTo(element.parent());
}
- jQuery EasyUI API 中文文檔 - ValidateBox驗證框
- jQuery.Validate驗證庫的使用介紹
- jquery插件validate驗證的小例子
- Jquery Validate 正則表達式實用驗證代碼大全
- jquery內(nèi)置驗證(validate)使用方法示例(表單驗證)
- jquery validate添加自定義驗證規(guī)則(驗證郵箱 郵政編碼)
- jquery validate 自定義驗證方法介紹 日期驗證
- 使用jquery.validate自定義方法實現(xiàn)"手機號碼或者固話至少填寫一個"的邏輯驗證
- jQuery驗證插件 Validate詳解
- 基于Bootstrap+jQuery.validate實現(xiàn)Form表單驗證
- jQuery Validate驗證框架經(jīng)典大全
相關(guān)文章
jquery實現(xiàn)在頁面加載的時自動為日期插件添加當(dāng)前日期
這篇文章主要介紹了通過jquery實現(xiàn)在頁面加載的時自動為日期插件添加當(dāng)前日期,需要的朋友可以參考下2014-08-08
easyui取消表單實時驗證,提交時統(tǒng)一驗證的簡單實例
下面小編就為大家?guī)硪黄猠asyui取消表單實時驗證,提交時統(tǒng)一驗證的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
jQuery實現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對應(yīng)大圖片功能【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對應(yīng)大圖片功能,涉及jQuery事件響應(yīng)、元素遍歷及屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-04-04
jQuery實現(xiàn)ajax調(diào)用WCF服務(wù)的方法(附帶demo下載)
這篇文章主要介紹了jQuery實現(xiàn)ajax調(diào)用WCF服務(wù)的方法,以完整實例形式分析了jQuery的ajax前端調(diào)用及后臺交互調(diào)用WCF服務(wù)的相關(guān)技巧,并附帶完整實例共讀者下載,需要的朋友可以參考下2015-12-12

