validform表單驗(yàn)證的實(shí)現(xiàn)方法
validform插件主要把所有的驗(yàn)證條件和驗(yàn)證提示信息綁定到每個(gè)表單元素,這種形式非常方便,下面寫法更加智能得到label內(nèi)容來提示
validform有什么用?
網(wǎng)頁上有大量的input需要你進(jìn)行驗(yàn)證的時(shí)候,如果是彈窗的話,需要不停地判斷,如果為空,彈窗。如果不是數(shù)字,彈窗。
所以要將這么多驗(yàn)證交給一個(gè)js去驗(yàn)證。
validateform.js簡(jiǎn)單使用方法
1.datatype
要想標(biāo)識(shí)出來想要驗(yàn)證的對(duì)象,我們就需要給這個(gè)對(duì)象綁定datatype屬性,validform.js已經(jīng)內(nèi)置了10種驗(yàn)證格式,如果不夠,我們還可以使用
http://validform.rjboy.cn/Validform/Validform_Datatype.js
來對(duì)驗(yàn)證格式進(jìn)行擴(kuò)展。
1.1 datatype=*
這個(gè)驗(yàn)證是用來表示當(dāng)前的對(duì)象不能為空的,任何字符均可
1.2 datatype=*6-16
validform這個(gè)js有個(gè)優(yōu)點(diǎn),它會(huì)自動(dòng)擴(kuò)展你所寫的驗(yàn)證格式。不同的字段我們可能要求的字符數(shù)量不一樣,用戶名這里你寫了*6-16,要求用戶填入6到16位的字符??蓸?biāo)題這里又要求填入2到5個(gè)字符,難道我們要在驗(yàn)證格式這里再寫一個(gè)*2-5嗎?不用!形如"*6-16"的datatype,Validform會(huì)自動(dòng)擴(kuò)展,可以指定任意的數(shù)值范圍。如內(nèi)置基本類型有"*6-16",那么你綁定 datatype="*4-12"就表示4到12位任意字符。如果你自定義了一個(gè)datatype="zh2-4",表示2到4位中文字符,那么 datatype="zh2-6"就表示2到6位中文字符。
1.3 datatype=url
可以用來驗(yàn)證網(wǎng)址。
1.4 datatype=e
可以用來驗(yàn)證電子郵箱地址
1.5 datatype=m
用來驗(yàn)證手機(jī)號(hào),但是給的正則表達(dá)式有問題,對(duì)于新出現(xiàn)的177號(hào)段之類的沒有加入進(jìn)去,這塊需要注意一下。
1.6 其他注意事項(xiàng)
datatype支持規(guī)則累加或單選。用","分隔表示規(guī)則累加;用"|"分隔表示規(guī)則多選一,即只要符合其中一個(gè)規(guī)則就可以通過驗(yàn)證,綁定的規(guī)則會(huì)依次 驗(yàn)證,只要驗(yàn)證通過,后面的規(guī)則就會(huì)忽略不再比較。如綁定datatype="m|e",表示既可以填寫手機(jī)號(hào)碼,也能填寫郵箱地址,如果知道填入的是手 機(jī)號(hào)碼,那么就不會(huì)再檢測(cè)他是不是郵箱地址;datatype="zh,s2-4",表示要符合自定義類型"zh",也要符合規(guī)則"s2-4"。
直接綁定正則:如可用這樣寫datatype="/\w{3,6}/i",要求是3到6位的字母,不區(qū)分大小寫;
支持簡(jiǎn)單的邏輯運(yùn)算:如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform\.rjboy\.cn$/",
這 個(gè)表達(dá)式的意思是:可以是手機(jī)號(hào)碼;或者是郵箱地址,但字符長(zhǎng)度必須在4到18位;或者是3到6位的字母,不區(qū)分大小寫;或者輸入 validform.rjboy.cn,區(qū)分大小寫。這里","分隔相當(dāng)于邏輯運(yùn)算里的"&&"; "|"分隔相當(dāng)于邏輯運(yùn)算里的"||";不支持括號(hào)運(yùn)算。
2.ignore
綁定了ignore="ignore"的表單元素,在有輸入時(shí),會(huì)驗(yàn)證所填數(shù)據(jù)是否符合datatype所指定數(shù)據(jù)類型,沒有填寫內(nèi)容時(shí)則會(huì)忽略對(duì)它的驗(yàn)證;
如何在表單中控制如果某幾項(xiàng)要填都填,要不填都不填。
對(duì)這幾項(xiàng)賦給相同的class 比如AllNeedOrEmpty
之后在初始化參數(shù)中的beforeCheck部分對(duì)這個(gè)class做操作,具體代碼如下
beforeCheck: function(curform) {
$("#sliderAd ul").each(function() {
var needIgnore = true;
var _this = $(this);
var checkList = _this.find("input[class*=AllNeedOrEmpty]");
checkList.each(function() {
var that = $(this);
if (that.val() != "") {
checkList.each(function() {
$(this).removeAttr("ignore");
});
needIgnore = false;
}
});
if (needIgnore) {
checkList.each(function() {
$(this).attr("ignore", "ignore");
});
}
});
},
上面的代碼只是提供一個(gè)思路,肯定有更好的方法,
比如使用validform對(duì)象中的ignore方法和unignore方法,通過向這兩個(gè)方法傳入表單元素來忽略和重新獲取驗(yàn)證效果。
不過這兩種方法是對(duì)元素賦給和去掉dataIgnore來實(shí)現(xiàn)驗(yàn)證與否。
源碼如下:
ignore: function(selector) {
var obj = this;
var selector = selector || "[datatype]"
$(obj.forms).find(selector).each(function() {
$(this).data("dataIgnore", "dataIgnore").removeClass("Validform_error");
});
return this;
},
unignore: function(selector) {
var obj = this;
var selector = selector || "[datatype]"
$(obj.forms).find(selector).each(function() {
$(this).removeData("dataIgnore");
});
return this;
},
我的方法是控制ignore這個(gè)attr,而validform方法則是在元素上利用data方法來實(shí)現(xiàn)是否驗(yàn)證,思路基本一致,但是當(dāng)元素是動(dòng)態(tài)生成的時(shí)候我覺得還是ignore=ignore這個(gè)方法比較好,因?yàn)槭∈掳 ?/p>
歡迎評(píng)論相互探討。
3.初始化參數(shù)
如下是官網(wǎng)例子中給出的所有的可用參數(shù)
頁面地址:http://validform.rjboy.cn/document.html
$(".demoform").Validform({
btnSubmit: "#btn_sub", //提交按鈕
btnReset: ".btn_reset",
tiptype: 1, //
ignoreHidden: false,
dragonfly: false,
tipSweep: true,
label: ".label",
showAllError: false,
postonce: true,
ajaxPost: true,
datatype: {
"*6-20": /^[^\s]{6,20}$/,
"z2-4": /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"username": function(gets, obj, curform, regxp) {
//參數(shù)gets是獲取到的表單元素值,obj為當(dāng)前表單元素,curform為當(dāng)前驗(yàn)證的表單,regxp為內(nèi)置的一些正則表達(dá)式的引用;
var reg1 = /^[\w\.]{4,16}$/,
reg2 = /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;
if (reg1.test(gets)) {
return true;
}
if (reg2.test(gets)) {
return true;
}
return false;
//注意return可以返回true 或 false 或 字符串文字,true表示驗(yàn)證通過,返回字符串表示驗(yàn)證失敗,字符串作為錯(cuò)誤提示顯示,返回false則用errmsg或默認(rèn)的錯(cuò)誤提示;
},
"phone": function() {
// 5.0 版本之后,要實(shí)現(xiàn)二選一的驗(yàn)證效果,datatype 的名稱 不 需要以 "option_" 開頭;
}
},
usePlugin: {
swfupload: {},
datepicker: {},
passwordstrength: {},
jqtransform: {
selector: "select,input"
}
},
beforeCheck: function(curform) {
//在表單提交執(zhí)行驗(yàn)證之前執(zhí)行的函數(shù),curform參數(shù)是當(dāng)前表單對(duì)象。
//這里明確return false的話將不會(huì)繼續(xù)執(zhí)行驗(yàn)證操作;
},
beforeSubmit: function(curform) {
//在驗(yàn)證成功后,表單提交前執(zhí)行的函數(shù),curform參數(shù)是當(dāng)前表單對(duì)象。
//這里明確return false的話表單將不會(huì)提交;
},
callback: function(data) {
//返回?cái)?shù)據(jù)data是json對(duì)象,{"info":"demo info","status":"y"}
//info: 輸出提示信息;
//status: 返回提交數(shù)據(jù)的狀態(tài),是否提交成功。如可以用"y"表示提交成功,"n"表示提交失敗,在ajax_post.php文件返回?cái)?shù)據(jù)里自定字符,主要用在callback函數(shù)里根據(jù)該值執(zhí)行相應(yīng)的回調(diào)操作;
//你也可以在ajax_post.php文件返回更多信息在這里獲取,進(jìn)行相應(yīng)操作;
//ajax遇到服務(wù)端錯(cuò)誤時(shí)也會(huì)執(zhí)行回調(diào),這時(shí)的data是{ status:**, statusText:**, readyState:**, responseText:** };
//這里執(zhí)行回調(diào)操作;
//注意:如果不是ajax方式提交表單,傳入callback,這時(shí)data參數(shù)是當(dāng)前表單對(duì)象,回調(diào)函數(shù)會(huì)在表單驗(yàn)證全部通過后執(zhí)行,然后判斷是否提交表單,如果callback里明確return false,則表單不會(huì)提交,如果return true或沒有return,則會(huì)提交表單。
}
});
3.1 如何使用ajax提交數(shù)據(jù),而不提交表單。
beforeSubmit: function (curform) {
addNewAd();
return false;
//這里明確return false的話表單將不會(huì)提交;
}
直接在beforeSubmit中加上對(duì)應(yīng)的ajax提交函數(shù),并加上return false就可以保證表單不會(huì)被提交而執(zhí)行我們的ajax函數(shù)。
3.2 tiptype
用來設(shè)置提示信息的展示方式,可用的值有:1、2、3、4和function函數(shù),默認(rèn)tiptype為1。
1代表自定義彈出框提示。
2代表側(cè)邊提示,會(huì)在當(dāng)前元素的父級(jí)的next對(duì)象的子級(jí)查找顯示提示信息的對(duì)象。
如果不存在就會(huì)創(chuàng)建
if (tiptype == 2) {
if ($(this).parent().next().find(".Validform_checktip").length == 0) {
$(this).parent().next().append("<span class='Validform_checktip' />");
$(this).siblings(".Validform_checktip").remove();
}
}
3也是代表的側(cè)邊提示,不過它是會(huì)在當(dāng)前元素的siblings對(duì)象中查找顯示提示信息的對(duì)象
同樣也是不存在就會(huì)創(chuàng)建
if (tiptype == 3) {
if ($(this).siblings(".Validform_checktip").length == 0) {
$(this).parent().append("<span class='Validform_checktip' />");
$(this).parent().next().find(".Validform_checktip").remove();
}
}
4也是側(cè)邊顯示會(huì)在當(dāng)前元素的父級(jí)的next對(duì)象下查找顯示提示信息的對(duì)象
還可以傳入自定義函數(shù),實(shí)現(xiàn)你想要的提示效果。
validform實(shí)例
【1】引入js腳本:
<link href="${ctx}/assets/css/validform.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script src="${ctx}/assets/js/validform_min.js"></script>
【2】html:
<form action="$104.116.116.112.115.58.47.47.115.101.103.109.101.110.116.102.97.117.108.116.46.99.111.109.47.97.47.49.49.57.48.48.48.48.48.49.56.52.50.54.53.54.53./insert" class="form-horizontal form-bordered" method="post" id="validform">
<div class="form-group">
<label class="control-label col-md-3">類型</label>
<div class="col-md-4">
<select class="form-control" data-width="100%" name="equipment.categoryId" id="equipmentCategory">
<option value="">--請(qǐng)選擇--</option>
<c:forEach items="${equipmentCategoryList}" var="obj">
<option value="${obj.id}" <c:if test="${obj.id eq equipment.categoryId }">selected</c:if> >${obj.name}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">設(shè)備名稱</label>
<div class="col-md-4">
<input class="form-control inputxt" type="text" value="${equipment.name}" name="equipment.name"/>
</div>
</div>
</form>
【3】js腳本:
// 添加驗(yàn)證
$(function(){
var demo=$("#validform").Validform({//指明是哪一表單需要驗(yàn)證,名稱需加在form表單上;
tiptype:3
,label:".control-label"
,showAllError:true
,ignoreHidden:true
,datatype:{
"zh1-6":/^[\u4E00-\u9FA5\uf900-\ufa2d]{1,6}$/
,"Aa1":/^[A-Za-z0-9]+$/
}
});
demo.addRule([
{
ele:".inputxt"
,datatype:"*1-256"
},
{
ele:"select"http://<option value="">--請(qǐng)選擇--</option>,這一項(xiàng)的值為空,否則無效
,datatype:"*"http://也可以寫到input標(biāo)簽里
}
]);
// 阻止表單提交(這是一種形式,因?yàn)檫€沒找到兩者比較時(shí)候的判斷)
$("#submit").click(function(event) {
var highest = $("#highest").val();
var lowest = $("#lowest").val();
if(highest <= lowest){
alert("最高層熟不能小于最低層數(shù)");
return false;// 禁止提交
}
if(lowest > 2){
alert("最低層數(shù)不能大于1");
return false;
}
});
})
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery實(shí)現(xiàn)頁面圖片等比例放大縮小功能
本文將利用jquery實(shí)現(xiàn)頁面圖片等比例放大和縮小。說明: 頁面中經(jīng)常需要將未知大小的圖片展示在有限的空間里, 如果直接指定圖片的width和height值, 就有可能造成圖片走樣, 這段代碼就是為解決這個(gè)問題設(shè)計(jì)2014-02-02
jQuery刪除一個(gè)元素后淡出效果展示刪除過程的方法
這篇文章主要介紹了jQuery刪除一個(gè)元素后淡出效果展示刪除過程的方法,實(shí)例分析了jQuery中fadeTo及slideUp等方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
解決Jquery下拉框數(shù)據(jù)動(dòng)態(tài)獲取的問題
下面小編就為大家分享一篇解決Jquery下拉框數(shù)據(jù)動(dòng)態(tài)獲取的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
根據(jù)郵箱的域名跳轉(zhuǎn)到相應(yīng)的登錄頁面的代碼
其實(shí)主要是想記錄一下這種對(duì)象的用法,喜歡的朋友可以參考下2012-02-02
jquery.artwl.thickbox.js 一個(gè)非常簡(jiǎn)單好用的jQuery彈出層插件
jquery.artwl.thickbox.js 一個(gè)非常簡(jiǎn)單好用的jQuery彈出層插件,需要的朋友可以參考下2012-03-03
jQuery mobile在頁面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序
這篇文章主要介紹了jQuery mobile在頁面加載時(shí)添加加載中效果 document.ready 和window.onload執(zhí)行順序比較,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07
jquery isEmptyObject判斷是否為空對(duì)象的函數(shù)
jQuery 判斷一個(gè)對(duì)象是否為空是使用for name in obj 來遍歷對(duì)象中的屬性名.2011-02-02

