推薦一個自己用的封裝好的javascript外掛程式_javascript技巧

來源:互聯網
上載者:User

具體內容請看注釋,這裡就不多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屬性(自訂)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;  }  //檢查是否匹配該Regex  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;    }  });});

基本上常用的功能都封裝在內了,希望小夥伴們能夠喜歡。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.