快捷導(dǎo)航

jQuery完成表單驗(yàn)證的實(shí)例代碼(純代碼)

更新時(shí)間：2017年09月30日 08:47:34 作者：qq_40447559

這篇文章主要介紹了jquery完成表單驗(yàn)證的實(shí)例代碼，代碼簡(jiǎn)單易懂,需要的朋友可以參考下

廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：

<!doctype html>
 <head>
 <meta charset=utf-8" />
 <title>表單驗(yàn)證</title>
 <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <!-- 引入jQuery -->
 <script src="jquery/jquery.js" type="text/javascript"></script>
 <script>
 $(document).ready(function() {
 $("form :input.required").each(function() {
 var $required=$("<strong class=high>*</strong>");
 $(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='請(qǐng)輸入至少六位的用戶名';
 $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
 }else{
 var okMsg='輸入正確';
 $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
 return false;
 }
 }
 if($(this).is("#email")){
 if(this.value==""||(this.value!==""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
 var errorMsg='請(qǐng)輸入正確的E—mail地址';
 $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
 }else{
 var okMsg='輸入正確';
 $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
 }
 }
 });
 $("#send").click(function() {
 $("form .required:input").trigger('blur');
 var numError=$("form .onError").length;
 if(numError){
 return false;
 }
 alert("注冊(cè)成功，密碼已發(fā)到你的郵箱，請(qǐng)查收。");
 });
 });
 </script>
 </head>
 <body>
 <form method="post" action="">
 <div class="int">
 <label for="username">用戶名:</label>
 <input type="text" id="username" class="required" />
 </div>
 <div class="int">
 <label for="email">郵箱:</label>
 <input type="text" id="email" class="required" />
 </div>
 <div class="int">
 <label for="personinfo">個(gè)人資料:</label>
 <input type="text" id="personinfo" />
 </div>
 <div class="sub">
 <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
 </div>
 </form>
 </body>
 </html>

總結(jié)

以上所述是小編給大家介紹的jQuery完成表單驗(yàn)證的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

快速解決jquery之get緩存問題的最簡(jiǎn)單方法介紹
要解決該問題有很多辦法，最直接的是把$.get()方法換成$.ajax()，然后配置cache:false即可。我不喜歡$.ajax()繁瑣的配置方式，可采取以下最簡(jiǎn)單方式實(shí)現(xiàn)
2013-12-12
jQuery實(shí)現(xiàn)本地預(yù)覽上傳圖片功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)本地預(yù)覽上傳圖片功能，為大家推薦了一款圖片上傳預(yù)覽插件，感興趣的小伙伴們可以參考一下
2016-01-01
jQuery實(shí)現(xiàn)簡(jiǎn)單聊天室
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單聊天室，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
jQuery 圖像裁剪插件Jcrop的簡(jiǎn)單使用
目前做的這個(gè)項(xiàng)目中要用到用戶頭像功能，領(lǐng)導(dǎo)說最好是做成用戶上傳一個(gè)圖片后可以用圖像裁剪的方法自己選擇頭像。
2009-05-05
jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法(附帶demo下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax調(diào)用WCF服務(wù)的方法,以完整實(shí)例形式分析了jQuery的ajax前端調(diào)用及后臺(tái)交互調(diào)用WCF服務(wù)的相關(guān)技巧,并附帶完整實(shí)例共讀者下載,需要的朋友可以參考下
2015-12-12
jquery 表單下所有元素的隱藏
jquery 表單下所有元素的隱藏，不用增加額外的div是個(gè)不錯(cuò)的方法。
2009-07-07
jquery.form.js異步提交表單詳解
這篇文章主要為大家詳細(xì)介紹了jquery.form.js異步提交表單的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
如何用jQuery實(shí)現(xiàn)ASP.NET GridView折疊伸展效果
我們今天就一個(gè)具體的需求進(jìn)行分析，引出如何用jQuery實(shí)現(xiàn)ASP.NET GridView折疊伸展效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-09-09
jQuery插件bgStretcher.js實(shí)現(xiàn)全屏背景特效
可以自動(dòng)動(dòng)態(tài)更換網(wǎng)頁背景圖片的jQuery插件bgstretcher.js，sharejs.com推薦的這個(gè)插件，可以自定義多種方式讓網(wǎng)頁背景自動(dòng)切換，效果流暢，非常難得，調(diào)用代碼也非常簡(jiǎn)單。
2015-06-06
ajax 文件上傳應(yīng)用簡(jiǎn)單實(shí)現(xiàn)
今天看到一個(gè)jquery插件jquery.fileupload.v.1.5.0，自己試著結(jié)合java做了一個(gè)ajax的文件上傳小應(yīng)用
2009-03-03