jquery實現(xiàn)簡易的移動端驗證表單
更新時間：2015年11月08日 15:33:34 投稿：hebedich
本文給大家匯總介紹了幾個常用的jquery實現(xiàn)簡易的移動端驗證表單，非常的實用，有需要的小伙伴可以進(jìn)來參考下。
驗證是否顯示紅色的提交按鈕
bindBlur:function(){//jquery多級驗證表單
var n = $('#item_name');
var p = $('#price');
var r = $('#reserve');
show(velidate());//頁面加載之后先進(jìn)行一次驗證
//分別對三個需要驗證的字段進(jìn)行驗證綁定，這里也可以寫成一句代碼
//$('#item_name','#price',$('#reserve')).on({blur:function(){show(veridate())}});
n.on({blur:function(){show(velidate())}});
p.on({blur:function(){show(velidate())}});
r.on({blur:function(){show(velidate())}});
function velidate(){//獲取驗證的結(jié)果
var flag = true;
if(n.val()==""){flag= false;}
if(p.val()=="0" || p.val()==""){flag= false;}
if(r.val()=="0" || r.val()==""){flag= false;}
return flag;
}
function show(flag){//將驗證結(jié)果反映到頁面
if(flag){$(".down-complete-btn").css("background-color","#b02125");}
else{$(".down-complete-btn").css("background-color","#8f8f8f");}
}
},
驗證，在用戶點擊提交的時候調(diào)用，會定位需要完善的地方
check:function(){
var n = $('#item_name');
var p = $('#price');
var r = $('#reserve');
if(n.val()==""){n.focus();return false;}
if(p.val()=="0" || p.val()==""){p.focus();return false;}
if(r.val()=="0" || r.val()==""){r.focus();return false;}
return true;
},
這一段是ajax提交和提交前調(diào)用驗證
postData:function(){
$(".down-complete-btn").click(function(){
if(Add.check()){
$.ajax({
type : 'post',
dataType : 'json',
data : {
id : $("#item_id").val(),
name : $("#item_name").val(),
price : $("#price").val(),
photos : $("#photos").val(),
},
cache : false,
url : '/main/goods/add',
success : function(data){
if(data.code==1){
alert("修改成功");
}else{
console.log(data);
}
},
error : function(){
alert('網(wǎng)絡(luò)異常');
}
});
}
});
}
easy_form_validate.js
require.config({
paths:{
"jquery":"./lib/jquery-1.11.1.min",
'icon_Upload':'./icon_Upload'
}
});
require(['jquery','icon_Upload'],function(){
Add.bindBlur();
Add.postData();
});
var Add = {
bindBlur:function(){//jquery多級驗證表單
var n = $('#item_name');
var p = $('#price');
var r = $('#reserve');
show(velidate());//頁面加載之后先進(jìn)行一次驗證
//分別對三個需要驗證的字段進(jìn)行驗證綁定，這里也可以寫成一句代碼
//$('#item_name','#price',$('#reserve')).on({blur:function(){show(velidate())}});
n.on({blur:function(){show(velidate())}});
p.on({blur:function(){show(velidate())}});
r.on({blur:function(){show(velidate())}});
function velidate(){//獲取驗證的結(jié)果
var flag = true;
if(n.val()==""){flag= false;}
if(p.val()=="0" || p.val()==""){flag= false;}
if(r.val()=="0" || r.val()==""){flag= false;}
return flag;
}
function show(flag){//將驗證結(jié)果反映到頁面
if(flag){$(".down-complete-btn").css("background-color","#b02125");}else{$(".down-complete-btn").css("background-color","#8f8f8f");}
}
},
check:function(){
var n = $('#item_name');
var p = $('#price');
var r = $('#reserve');
if(n.val()==""){n.focus();return false;}
if(p.val()=="0" || p.val()==""){p.focus();return false;}
if(r.val()=="0" || r.val()==""){r.focus();return false;}
return true;
},
postData:function(){
$(".complete-btn").click(function(){
if(Add.check()){
$.ajax({
type : 'post',
dataType : 'json',
data : {
id : $("#item_id").val(),
name : $("#item_name").val(),
summary : $("#summary").text(),
price : $("#price").val(),
store : $("#store").val(),
mobileDetail : $("#detail").val(),
photos : $("#photos").val(),
brokerage : $("#brokerage").val(),
flag : $("#flag").val(),
},
cache : false,
url : '/main/goods/add',
success : function(data){
if(data.code==1){
alert("修改成功");
}else{
console.log(data);
}
},
error : function(){
alert('網(wǎng)絡(luò)異常');
}
});
}
});
}
};
我們再來看一則驗證代碼
<script type="text/javascript">
//<![CDATA[
$(function(){
/*
*思路大概是先為每一個required添加必填的標(biāo)記，用each()方法來實現(xiàn)。
*在each()方法中先是創(chuàng)建一個元素。然后通過append()方法將創(chuàng)建的元素加入到父元素后面。
*這里面的this用的很精髓，每一次的this都對應(yīng)著相應(yīng)的input元素，然后獲取相應(yīng)的父元素。
*然后為input元素添加失去焦點事件。然后進(jìn)行用戶名、郵件的驗證。
*這里用了一個判斷is()，如果是用戶名，做相應(yīng)的處理，如果是郵件做相應(yīng)的驗證。
*在jQuery框架中，也可以適當(dāng)?shù)拇┎逡粚懺兜膉avascript代碼。比如驗證用戶名中就有this.value，和this.value.length。對內(nèi)容進(jìn)行判斷。
*然后進(jìn)行的是郵件的驗證，貌似用到了正則表達(dá)式。
*然后為input元素添加keyup事件與focus事件。就是在keyup時也要做一下驗證，調(diào)用blur事件就行了。用triggerHandler()觸發(fā)器，觸發(fā)相應(yīng)的事件。
*最后提交表單時做統(tǒng)一驗證
*做好整體與細(xì)節(jié)的處理
*/
//如果是必填的，則加紅星標(biāo)識.
$("form :input.required").each(function(){
var $required = $("<strong class='high'> *</strong>"); //創(chuàng)建元素
$(this).parent().append($required); //然后將它追加到文檔中
});
//文本框失去焦點后
$('form :input').blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//驗證用戶名
if( $(this).is('#username') ){
if( this.value=="" || this.value.length < 6 ){
var errorMsg = '請輸入至少6位的用戶名.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '輸入正確.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
//驗證郵件
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = '請輸入正確的E-Mail地址.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '輸入正確.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});//end blur
//提交，最終驗證。
$('#send').click(function(){
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert("注冊成功,密碼已發(fā)到你的郵箱,請查收.");
});
//重置
$('#res').click(function(){
$(".formtips").remove();
});
})
//]]>
</script>
相關(guān)文章
這篇文章主要介紹了jquery實現(xiàn)保存已選用戶,需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)擲骰子小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
將自己的表單元素ID和name命名為了nodeName，在chrome瀏覽器下報錯，結(jié)果發(fā)現(xiàn)是表單元素命名的原因2014-03-03
jQuery常用知識點總結(jié)以及平時封裝常用函數(shù)
這篇文章主要介紹了jQuery常用知識點總結(jié)以及平時封裝常用函數(shù) 的相關(guān)資料,需要的朋友可以參考下2016-02-02
詳細(xì)介紹jQuery.outerWidth() 函數(shù)具體用法
這篇文章通過jQuery示例代碼演示outerWidth()函數(shù)的具體用法，介紹的非常詳細(xì)，有需要的朋友可以借鑒2015-07-07
在一些電商網(wǎng)站我們都見到使用過放大鏡來查看商品詳情，那么基于jquery代碼是如何實現(xiàn)放大鏡效果的呢？下面由腳本之家小編給大家分享jquery代碼實現(xiàn)放大鏡效果2016-03-03
jQuery實現(xiàn)圖片輪播效果代碼(基于jquery.pack.js插件)
這篇文章主要介紹了jQuery實現(xiàn)圖片輪播效果的方法,該功能基于jquery.pack.js插件實現(xiàn),涉及jQuery針對頁面元素與樣式的動態(tài)操作技巧,需要的朋友可以參考下2016-06-06
這個漂亮的產(chǎn)品廣告效果，在購物網(wǎng)站也是比較常見的，或是迅雷視頻網(wǎng)站上。2010-12-12
jQuery 常見學(xué)習(xí)網(wǎng)站與參考書
打算學(xué)習(xí)jquery的朋友可以參下如下網(wǎng)上，參考書嗎，可以看下 鋒利的jquery腳本之家提供電子版下載。2009-11-11
DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序(圖文詳解)
DOM事件標(biāo)準(zhǔn)定義了兩種事件流，這兩種事件流有著顯著的不同并且可能對你的應(yīng)用有著相當(dāng)大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術(shù)一樣，在它們成為標(biāo)準(zhǔn)之前，Netscape和微軟各自不同地實現(xiàn)了它們，下面介紹DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序2015-08-08