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)文章
一些常用的驗證腳本2010-07-07
有時,要實現(xiàn)對于一篇文章的關(guān)鍵詞部分的提示,想實現(xiàn)的效果比如是,當(dāng)鼠標(biāo)移動到這個關(guān)鍵詞時,彈出相關(guān)的一段文字或圖片的介紹。2010-01-01
Jquery 動態(tài)循環(huán)輸出表格具體方法
這篇文章主要介紹了Jquery 動態(tài)循環(huán)輸出表格具體方法，有需要的朋友可以參考一下2013-11-11
jQuery 類twitter的文本字數(shù)限制帶提示效果插件
基于jquery的仿twitter的文本字數(shù)限制帶提示效果插件，這里提示比較好，不是簡單的限制，給用戶更好的體驗。2010-04-04
最近，需要做個劃詞搜索功能。在網(wǎng)上找了好些，最后，參照進行修改，實現(xiàn)了想要的功能。這里，做個記錄，以備日后所用。2010-09-09
jQuery Ajax傳值到Servlet出現(xiàn)亂碼問題的解決方法
jquery ajax 傳值給Servlet,在Servlet里Get接受參數(shù)亂碼,怎么解決呢？下面小編給大家?guī)砹薺query ajax傳值到Servlet出現(xiàn)亂碼問題的解決方法，一起看看吧2016-10-10
本文主要介紹了Jqprint實現(xiàn)頁面打印的具體方法，并提供了Jqprint插件下載。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
冒泡事件就是點擊子節(jié)點，會向上觸發(fā)父節(jié)點，祖先節(jié)點的點擊事件，有需要的朋友可以參考一下2013-10-10
Jquery是繼prototype之后又一個優(yōu)秀的Javascrīpt框架。它是輕量級的js庫(壓縮后只有21k) ，它兼容CSS3，還兼容各種瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)2013-06-06
基于jquery css3實現(xiàn)點擊動畫彈出表單源碼特效
這篇文章主要介紹了基于jquery css3實現(xiàn)點擊動畫彈出表單,彈出的表單沒有任何遮蓋層，在web前端程序開發(fā)中經(jīng)常會用到，需要的朋友可以參考下2015-08-08