關(guān)于jquery.validate1.9.0前臺驗(yàn)證的使用介紹
一、利用jquery.form插件提交表單方法使用jquery.validate插件
現(xiàn)象：當(dāng)提交表單時，即使前臺未驗(yàn)證通過，也照常提交表單。
解決辦法：
$('#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方式提交，那請采用如下兩種方式和校驗(yàn)框架結(jié)合
1)、使用submitHandler屬性配置ajax提交，submithandler：當(dāng)表單全部校驗(yàn)通過之后會回調(diào)配置的代碼，此處也就是當(dāng)校驗(yàn)通過之后調(diào)用ajax提交。
2)、使用valid方法，監(jiān)聽form的submit事件，當(dāng)$('#form').valid()返回true的時候再提交。
通過監(jiān)聽form的submit事件，對form進(jìn)行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)象一：
我在注冊表單新加了一個驗(yàn)證碼。驗(yàn)證結(jié)果錯誤時，這個錯誤信息跑到驗(yàn)證碼前面去了。如下圖所示：
目的：讓錯誤信息在驗(yàn)證碼后面
現(xiàn)象二：
上圖中的紅色提示內(nèi)容，我想移到 (* 必填) 的后面。
上面兩個現(xiàn)象，可通過jquery.validate自帶的控制錯誤信息位置的方法——'errorPlacement'，使用也很方便：
errorPlacement: function(error, element)
{
error.appendTo(element.parent());
}
- jQuery EasyUI API 中文文檔 - ValidateBox驗(yàn)證框
- jQuery.Validate驗(yàn)證庫的使用介紹
- jquery插件validate驗(yàn)證的小例子
- Jquery Validate 正則表達(dá)式實(shí)用驗(yàn)證代碼大全
- jquery內(nèi)置驗(yàn)證(validate)使用方法示例(表單驗(yàn)證)
- jquery validate添加自定義驗(yàn)證規(guī)則(驗(yàn)證郵箱 郵政編碼)
- jquery validate 自定義驗(yàn)證方法介紹 日期驗(yàn)證
- 使用jquery.validate自定義方法實(shí)現(xiàn)"手機(jī)號碼或者固話至少填寫一個"的邏輯驗(yàn)證
- jQuery驗(yàn)證插件 Validate詳解
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- jQuery Validate驗(yàn)證框架經(jīng)典大全
相關(guān)文章
jQuery實(shí)現(xiàn)獲取元素索引值index的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取元素索引值index的方法,涉及jQuery針對頁面元素的遍歷,index索引操作及屬性操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
jquery實(shí)現(xiàn)在頁面加載的時自動為日期插件添加當(dāng)前日期
這篇文章主要介紹了通過jquery實(shí)現(xiàn)在頁面加載的時自動為日期插件添加當(dāng)前日期,需要的朋友可以參考下2014-08-08
第一次用JSON作為jquery異步請求的傳輸對象，結(jié)果在jquery請求后返回的結(jié)果是字符串還是json對象上折騰了半天。2011-04-04
jQuery實(shí)現(xiàn)的簡單懸浮層功能完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單懸浮層功能,結(jié)合完整實(shí)例形式分析了jQuery基于時間函數(shù)動態(tài)修改css樣式實(shí)現(xiàn)窗口浮動效果的相關(guān)技巧,需要的朋友可以參考下2017-01-01
easyui取消表單實(shí)時驗(yàn)證,提交時統(tǒng)一驗(yàn)證的簡單實(shí)例
下面小編就為大家?guī)硪黄猠asyui取消表單實(shí)時驗(yàn)證,提交時統(tǒng)一驗(yàn)證的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
根據(jù)多個屬性選擇在某些對選擇比較精確的情況下，還是比較實(shí)用的，其實(shí)很簡單，不會的朋友看下本文2013-10-10
這篇文章主要介紹了jQuery新窗口打開外鏈接的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
最近一年多一直在做前端的東西，由于老板在追求一些年輕動感的效果，讓頁面元素不能僅僅是簡單的隱藏顯示，所以經(jīng)常會使用一些動畫效果，發(fā)現(xiàn)jQuery的動畫真心好用啊，把常用的幾個總結(jié)一下，希望不再每次使用的時候還去翻API2013-10-10
jQuery實(shí)現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對應(yīng)大圖片功能【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對應(yīng)大圖片功能,涉及jQuery事件響應(yīng)、元素遍歷及屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04
jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法(附帶demo下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法,以完整實(shí)例形式分析了jQuery的ajax前端調(diào)用及后臺交互調(diào)用WCF服務(wù)的相關(guān)技巧,并附帶完整實(shí)例共讀者下載,需要的朋友可以參考下2015-12-12