jquery中輸入驗證中一個不錯的效果
更新時間：2010年08月21日 13:38:05 作者：
在表單的輸入驗證中，經(jīng)常要當(dāng)用戶沒能正確輸入后，要提示“XXXX輸入錯誤”這一類的信息，如何能搞到動態(tài)一點呢，今天發(fā)現(xiàn)jquery中的一個不錯的效果，筆記之。
1 包含jquery
<script src="images/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="images/jquery.form.js" type="text/javascript"></script>
2 設(shè)置
<div id="msg"></div></td>
3 JAVASCRIPT設(shè)置
<script type="text/javascript">
<!--
$(function(){
$('#msg').hide();
var options = {
target: '#msg',
url: 'XXXX.ACTION',
beforeSubmit: function(){
if($('#company').val()==''){
$('#msg').html("<span class=\"about_content_title\">[公司名稱]不能為空!</span>");
$('#msg').show(1000);
$('#msg').hide(3000);
return false;
}
$('#msg').html("<img src=\"images/loading.gif\" /><span class=\"about_content_title\"> 資料保存中，請稍候。。。</span>");
$('#msg').show(1000);
}
success: function() {
$('#msg').html("<span class=\"about_content_title\">資料保存成功!</span>");
$('#msg').show(1000);
$('#myform').resetForm();
$('#msg').hide(3000);
}
};
$('#myform').ajaxForm(options);
});
-->
</script>
復(fù)制代碼 代碼如下:
<script src="images/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="images/jquery.form.js" type="text/javascript"></script>
2 設(shè)置
<div id="msg"></div></td>
3 JAVASCRIPT設(shè)置
復(fù)制代碼 代碼如下:
<script type="text/javascript">
<!--
$(function(){
$('#msg').hide();
var options = {
target: '#msg',
url: 'XXXX.ACTION',
beforeSubmit: function(){
if($('#company').val()==''){
$('#msg').html("<span class=\"about_content_title\">[公司名稱]不能為空!</span>");
$('#msg').show(1000);
$('#msg').hide(3000);
return false;
}
$('#msg').html("<img src=\"images/loading.gif\" /><span class=\"about_content_title\"> 資料保存中，請稍候。。。</span>");
$('#msg').show(1000);
}
success: function() {
$('#msg').html("<span class=\"about_content_title\">資料保存成功!</span>");
$('#msg').show(1000);
$('#myform').resetForm();
$('#msg').hide(3000);
}
};
$('#myform').ajaxForm(options);
});
-->
</script>
相關(guān)文章
jQuery.ajax向后臺傳遞數(shù)組問題的解決方法
這篇文章主要為大家詳細介紹了jQuery.ajax向后臺傳遞數(shù)組問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
本文主要對jQuery的基礎(chǔ)知識進行介紹，非常適合剛開始接觸JQuery學(xué)習(xí)的朋友們，下面就跟小編一起來看下吧2016-12-12
使用JQuery實現(xiàn)Ctrl+Enter提交表單的方法
這篇文章主要介紹了使用JQuery實現(xiàn)Ctrl+Enter提交表單的方法，需要的朋友可以參考下2015-10-10
基于jquery編寫的橫向自適應(yīng)幻燈片切換特效的實例代碼
全屏自適應(yīng)jquery焦點圖切換特效,在IE6這個瀏覽器兼容性問題上得到了和諧,兼容IE6,適用瀏覽器：IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.相關(guān)代碼2013-08-08
好的代碼會帶來速度的提升，快速渲染和響應(yīng)意味著更好的用戶體驗。本文主要總結(jié)了如何高效的編寫jQuery代碼的技巧，對提升你的jQuery和javascript代碼具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
使用BootStrap和Metroui設(shè)計的metro風(fēng)格微網(wǎng)站或手機app界面
今天使用bootstrap和metroui設(shè)計了一個metro風(fēng)格的移動app或者微信微網(wǎng)站的界面，非常不錯具有參考借鑒價值，感興趣的朋友可以參考下2016-10-10
JQuery搜索框自動補全(模糊匹配)功能實現(xiàn)示例
這篇文章主要介紹了JQuery搜索框自動補全(模糊匹配)功能實現(xiàn)示例沒使用JQuery UI的autocomplete插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
jquery獲取復(fù)選框checkbox的值實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query獲取復(fù)選框checkbox的值實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery統(tǒng)計輸入文字的個數(shù)并對其進行判斷
判斷輸入文字個數(shù)并提示還可以輸入多少個字，類似的功能使用jquery便可輕松實現(xiàn)2014-01-01
juqery 學(xué)習(xí)之三 選擇器 子元素與表單
juqery 學(xué)習(xí)之三 選擇器 子元素與表單，學(xué)習(xí)jquery的朋友可以參考下。2010-11-11