jQuery表單驗證效果詳解
表單驗證是功能的必選項,否則可能會出現各種安全問題,當表單驗證不通過的時候,會出現各種提示,為了提示醒目,兼顧美觀,表單驗證都會進行各種美化,下面分享一個簡單的表單驗證效果,供初學者參考。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body, input, textarea { font-size:12px; line-height:18px; font-family:Verdana, Geneva, sans-serif; } input {width:200px;} .submit {width:120px;} #error { color:red; font-size:10px; display:none; } .needsfilled{ background:#DD36B3; color:white; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ required = ["name", "email", "message"]; email = $("#email"); errornotice = $("#error"); emptyerror = "請填寫相關內容"; emailerror = "請填寫一個有效的右鍵地址"; $("#theform").submit(function(){ for (var index=0;index<required.length;index++) { var input = $('#'+required[index]); if ((input.val() == "") || (input.val() == emptyerror)) { input.addClass("needsfilled"); input.val(emptyerror); errornotice.fadeIn(750); } else { input.removeClass("needsfilled"); } } if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())){ email.addClass("needsfilled"); email.val(emailerror); } if ($(":input").hasClass("needsfilled")) { return false; } else { errornotice.hide(); return true; } }); $(":input").focus(function(){ if ($(this).hasClass("needsfilled") ) { $(this).val(""); $(this).removeClass("needsfilled"); } }); }); </script> </head> <body> <form id="theform" name="theform" method="post"> <p> <label for="name">姓名</label><br /> <input id="name" type="text" value="" name="name" /> </p> <p> <label for="email">郵箱</label><br /> <input id="email" type="text" value="" name="email" /> </p> <p> <label for="message">資訊內容</label><br /> <textarea id="message" rows="7" cols="30" name="message"></textarea> </p> <p><input class="submit" type="submit" name="submit" value="提交表單" /></p> <p id="error">表單中有錯誤資訊!</p> </form> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(document).ready(function(){}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).required = ["name", "email", "message"],一個陣列儲存有表單元素的id屬性值。
(3).email = $("#email"),獲取郵箱表單元素。
(4).errornotice = $("#error"),獲取錯誤提醒元素。
(5).emptyerror = "請填寫相關內容",表單為空提示內容。
(6).emailerror = "請填寫一個有效的右鍵地址",郵箱格式錯誤提示內容。
(7).$("#theform").submit(function(){}),為表單註冊提交submit事件處理函式。
(8).for (var index=0;index<required.length;index++) {},遍歷陣列中的每一個元素。
(9).var input = $('#'+required[index]),獲取對應id的表單元素。
(10).if ((input.val() == "") || (input.val() == emptyerror)) {
input.addClass("needsfilled");
input.val(emptyerror);
errornotice.fadeIn(750);
}如果表單的內容為空或者是錯誤提示內容。
那麼就新增needsfilled樣式類,那麼表單背景變為粉紅色。
然後寫入提示文字,並且錯誤顯示內容。
(11).else {
input.removeClass("needsfilled");
},否則刪除指定的樣式類,也就是不讓表單元素背景變為粉紅色。
(12)if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())){
email.addClass("needsfilled");
email.val(emailerror);
},驗證郵箱是否合法。
如果不合法,那麼就將表單元素的背景色設定為粉紅色。
並寫入提示文字。
(13).if ($(":input").hasClass("needsfilled")) {
return false;
}
else {
errornotice.hide();
return true;
}如果表單元素具有樣式類needsfilled,說明表單元素並非都是合法的。
那麼就取消表單提交效果。
否則的話,隱藏提示元素,然後提交表單。
(14).$(":input").focus(function(){
if ($(this).hasClass("needsfilled") ) {
$(this).val("");
$(this).removeClass("needsfilled");
}
}),為表單元素註冊focus事件處理函式。
如果表單元素具有指定的樣式類,那麼將其清空,並且移除此樣式類。
二.相關閱讀:
(1).submit事件參閱jQuery submit事件一章節。
(2).val()參閱jQuery val()一章節。
(3).fadeIn()參閱jQuery fadeIn()一章節。
(4).addClass()參閱jQuery addClass()一章節。
(5).removeClass()參閱jQuery removeClass()一章節。
(6).test()參閱正規表示式test()一章節。
(7).hasClass()參閱jQuery hasClass()一章節。
相關文章
- jquery.validate 表單驗證jQuery
- jQuery 表單驗證 學習手記jQuery
- 利用jQuery實現表單驗證功能jQuery
- jQuery Validate表單驗證基本流程介紹jQuery
- jQuery彈幕效果詳解jQuery
- jQuery 放大鏡效果詳解jQuery
- jQuery Validate表單驗證(使用者註冊簡單應用)jQuery
- 基於Bootstrap的強大jQuery表單驗證外掛bootjQuery
- jQuery滑鼠懸浮翻牌效果詳解jQuery
- jQuery滑鼠懸浮聚焦效果詳解jQuery
- jQuery實進度條效果詳解jQuery
- jQuery星級評分效果詳解jQuery
- jQuery表格隔行變色效果詳解jQuery
- jQuery 倒數計時效果詳解jQuery
- Laravel 表單驗證Laravel
- javascript表單驗證JavaScript
- bootstrap表單驗證boot
- bootstrapValidator 表單驗證boot
- JavaScript 表單驗證JavaScript
- antd 表單驗證
- jQuery 圖片垂直切換效果詳解jQuery
- jQuery Validate對select下拉選單驗證jQuery
- 表單required 必需驗證UI
- HTML 表單驗證概述HTML
- 表單資料驗證
- 表單驗證 regex:pattern
- 輸入表單驗證
- 路由表單驗證路由
- jQuery簡單tab效果jQuery
- 使用 jQuery, Angular.js 實現登入介面驗證碼詳解jQueryAngularJS
- vue表單驗證你真的會了嗎?元件之表單驗證(form)validateVue元件ORM
- jQuery Validate自定義表單元素驗證通過和不通過的樣式jQuery
- 開發中遇到的jquery函式應用和表單驗證處理jQuery函式
- iview表單驗證問題 Select驗證必填失敗,以及表單物件巢狀陣列驗證方法View物件巢狀陣列
- validate表單驗證外掛
- Lumen 仿 Laravel 表單驗證Laravel
- 前端表單驗證的目的前端
- 表單驗證教程簡介