封装好的一个万能检测表单的方法

  检测表单中的不能为空(.notnull)的验证

   作用:一对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回调函数;

  需要改进的地方:

  暂无

  

复制代码 代码如下:

  /// <reference path="vendor/jquery-1.4.1-vsdoc.js" />

  */

  //$(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;

  }

  });

  });

  以上代码就是封装过之后的万能检测表单的方法了,希望小伙伴们喜欢