具體內容請看注釋,這里就不多BB了,
奉上代碼:
/// <reference path="vendor/jquery-1.4.1-vsdoc.js" />///檢測表單中的不能為空(.notnull)的驗證/* 時間:2012-6-6 作用:一對form標簽下有多個(包括一個)表單需要提交時,使用js準確的判斷當前按鈕對那些元素做判斷 用法:在form標簽下 找到當前 表單的容器 給予class="form",當前表單的提交按鈕給予 class="check" 需要驗證為空的元素給予class="notnull" nullmsg="xx不能為空!"提示,需要進行邏輯判斷的表單給予class="need" 判斷的類型給予 class="num"(只能是數字) 驗證的提示 logicmsg="XX只能是數字" 給予class="errorMessage"顯示錯誤信息塊 給予class="warn"顯示錯誤信息 未使用js面向對象編程 邏輯判斷,不傳入need標識,直接給出正則表達式屬性(自定義)regex="/^/d$/" 做出判斷 在外部實現 Global.submitCallback button回調函數 Global.confirmCallback confirm回調函數; 需要改進的地方: 暫無 更新時間:2014年12月3日 16:23:22 作者:Amber.Xu *///$(document).ready(// function () {// $("form").find(".notnull").bind({// focus: function () {// if ($(this).attr("value") == this.defaultValue) {// $(this).attr("value", "");// }// },// blur: function () {// if ($(this).attr("value") == "") {// $(this).attr("value", this.defaultValue);// }// }// });// }//);///*封裝一個萬能檢測表單的方法*////event.srcElement:引發事件的目標對象,常用于onclick事件。///event.fromElement:引發事件的對象源,常用于onmouseout和onmouseover事件。///event.toElement:引發事件后,鼠標移動到的目標源,常用于onmouseout和onmouseover事件。function Global() { var _self = this;}Global.submitCallback = null;Global.confirmCallback = null;$(document).ready(function () { //form body $("body").find(".form").each(function () { this.onclick = function (e) { var button = null; try { button = e.srcElement == null ? document.activeElement : e.srcElement; } catch (e) { console.log(e.message) button = document.activeElement; } if ($(button).is(".check")) { //alert("提交") var sub = (checkform(this) && CheckInputRex(this) && checkselect(this) && checkChecked(this)); if (sub) { // Call our callback, but using our own instance as the context Global.submitCallback.call(this, [e]); } return sub; } else if ($(button).is(".confirm")) { //alert("刪除") var sub = confirm($(button).attr("title")); if (sub) { Global.confirmCallback.call(this, [e]); } return sub; } else { // //alert("其它") return true; } } }); /*檢測表單中不能為空的元素*/ function checkform(form) { var b = true; $(form).find(".notnull").each(function () { if ($.trim($(this).val()).length <= 0) {//|| $(this).val() == this.defaultValue // if (this.value != null) { // $(this).attr("value", ""); // } //alert($(this).attr("msg")) $(this).parents(".form").find(".warn").text($(this).attr("nullmsg")); $(this).parents(".form").find(".errorMessage").show(); $(this).select(); $(this).focus(); return b = false; } }); if (b == true) { $(form).find(".warn").text(""); $(form).find(".errorMessage").hide(); } return b; } /*檢測表單中必選的下拉列表*/ function checkselect(form) { var b = true; $(form).find(".select").each(function (i) { var ck = $(this).find('option:selected').text(); if (ck.indexOf("選擇") > -1) { $(this).parents(".form").find(".warn").text($(this).attr("nullmsg")); $(this).parents(".form").find(".errorMessage").show(); $(this).select(); $(this).focus(); return b = false; } }); return b; } /*檢測表單中必選的復選框*/ function checkChecked(form) { var b = true; $(form).find(".checkbox").each(function (i) { var ck = $(this)[0].checked; if (!ck) { $(this).parents(".form").find(".warn").text($(this).attr("nullmsg")); $(this).parents(".form").find(".errorMessage").show(); $(this).select(); $(this).focus(); return b = false; } }); return b; } //檢查是否匹配該正則表達式 function GetFlase(value, reg, ele) { if (reg.test(value)) { return true; } $(ele).parents(".form").find(".warn").text($(ele).attr("logicmsg")); $(ele).parents(".form").find(".errorMessage").show(); $(ele).focus(); $(ele).select(); return false; //不能提交 } function CheckInputRex(form) { var b = true; $(form).find("input[type='text']").each(function () { if (typeof ($(this).attr("regex")) == 'string') { if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) { //當前表單的值 var value = $(this).attr("value") || $(this).val(); var regx = eval($(this).attr("regex")); return b = GetFlase(value, regx, this); } } }); return b; } ///檢查用戶輸入的相應的字符是否合法 ///此方法已廢棄 function CheckInput(form) { var b = true; $(form).find(".need").each(function () { if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) { //當前表單的值 var value = $(this).attr("value"); //id的值或者name的屬性的值如:[name="contact"] var name = $(this).attr("class"); //檢查需要輸入的內容是否合法如:聯系方式 var len = name.split(" "); for (var i = 0; i < len.length; i++) { switch ($.trim(len[i])) { ///聯系方式 case "mobile": var reg = /^1/d{10}$/; return b = GetFlase(value, reg, this); break; ///郵箱 case "email": var reg = /^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$/; return b = GetFlase(value, reg, this); break; ///兩次密碼是否一致 case "password": break; case "password2": if ($("#password").attr("value") != $("#password2").attr("value")) { $(this).select(); //獲取焦點 $(this).parents(".form").find(".warn").text($(this).attr("logicmsg")); $(this).parents(".form").find(".errorMessage").show(); return b = false; //不能提交 } break; case "worktel": case "hometel": //家庭電話 var reg = /^/d{8}$/; return b = GetFlase(value, reg, this); break; case "post": //郵編 var reg = /^/d{6}$/; return b = GetFlase(value, reg, this); break; case "bonus": case "allowance": case "FixedSalary": var reg = /^-?([1-9]/d*/./d*|0/./d*[1-9]/d*|0?/.0+|0|[1-9]/d)$/; return b = GetFlase(value, reg, this); break; case "identity": var reg = /(^/d{15}$)|(^/d{18}$)|(^/d{17}(/d|X|x)$)/; return b = GetFlase(value, reg, this); break; case "height": var reg = /^[1-2][0-9][0-9]$/; return b = GetFlase(value, reg, this); break; case "qq": var reg = /^[1-9][0-9]{4,}$/; return b = GetFlase(value, reg, this); break; case "begintime": case "endtime": var reg = /^/d{4}$/; if (reg.test(value) && (parseInt($(".endtime").val()) > parseInt($(".begintime").val()))) { return b; } $.ligerDialog.alert($(this).attr("msg")) $(this).select(); //獲取焦點 return b = false; //不能提交 break; case "num": var reg = /^/d+$/; return b = GetFlase(value, reg, this); break; ///大陸去香港需要辦理往來港澳通行證和香港的簽注.因私普通護照號碼格式有: ///14/15+7位數,G+8位數; ///因公普通的是:P.+7位數; ///公務的是:S.+7位數 或者 //S+8位數,以D開頭的是外交護照 case "postport": //護照號碼 var reg = /^(P/d{7}|G/d{8}|S/d{7,8}|D/d+|1[4,5]/d{7})$/; return b = GetFlase(value, reg, this); break; case "bankaccount": var reg = /^[0-9]{19}$/; return b = GetFlase(value, reg, this); break; } //switch } //for } }); return b; } ///此方法已經廢棄});///單擊改變背景顏色$(document).ready(function () { var inputs = $("#top>.c>input"); $(inputs).each(function () { this.onclick = function () { document.getElementById("main").style.backgroundColor = this.name; //$("#main").backgroundColor = this.name; } });});
基本上常用的功能都封裝在內了,希望小伙伴們能夠喜歡。
新聞熱點
疑難解答