自己编写的支持Ajax验证的JS表单验证插件_javascript技巧

自己编写了一个表单验证插件，支持ajax验证，使用起来很简单。

每个需要验证的表单元素下面有一个span标签，这个标签的class有一个valid表示需要验证，如果有nullable则表示可为空；rule表示验证规则，msg表示错误提示信息；to表示要验证的元素的name值，如果元素是单个的，to可以不写。该插件会遍历每个有valid的span标签，找出它前面需要验证的元素，根据rule验证，如果验证不通过，则显示边框为红色，鼠标放在元素上时显示错误信息。

验证时机：1、点击提交按钮时显式调用验证方法；2、当元素触发blur时验证。

插件代码：

CSS：

.failvalid
{
 border: solid 2px red !important;
}

JS：

/**
* suxiang
* 2014年12月22日
* 验证插件
*/

SimpoValidate = {
 //验证规则
 rules: {
  int: /^[1-9]\d*$/,
  number: /^[+-]?\d*\.?\d+$/
 },

 //初始化
 init: function () {
  $(".valid").each(function () { //遍历span
   if ($(this)[0].tagName.toLowerCase() == "span") {
    var validSpan = $(this);
    var to = validSpan.attr("to");
    var target;
    if (to) {
     target = $("input[name='" + to + "'],select[name='" + to + "'],textarea[name='" + to + "']");
    } else {
     var target = validSpan.prev();
    }
    if (target) {
     target.blur(function () {
      SimpoValidate.validOne(target, validSpan);
     });
    }
   }
  });
 },

 //验证全部，验证成功返回true
 valid: function () {
  SimpoValidate.ajaxCheckResult = true;
  var bl = true;

  $(".valid").each(function () { //遍历span
   if ($(this)[0].tagName.toLowerCase() == "span") {
    var validSpan = $(this);
    var to = validSpan.attr("to");
    var target;
    if (to) {
     target = $("input[name='" + to + "'],select[name='" + to + "'],textarea[name='" + to + "']");
    } else {
     target = validSpan.prev();
    }
    if (target) {
     if (!SimpoValidate.validOne(target, validSpan)) {
      bl = false;
     }
    }
   }
  });

  return bl && SimpoValidate.ajaxCheckResult;
 },

 //单个验证，验证成功返回true
 validOne: function (target, validSpan) {
  SimpoValidate.removehilight(target, msg);

  var rule = SimpoValidate.getRule(validSpan);
  var msg = validSpan.attr("msg");
  var nullable = validSpan.attr("class").indexOf("nullable") == -1 ? false : true; //是否可为空
  var to = validSpan.attr("to");
  var ajaxAction = validSpan.attr("ajaxAction");

  if (target) {
   //checkbox或radio
   if (target[0].tagName.toLowerCase() == "input" && target.attr("type") && (target.attr("type").toLowerCase() == "checkbox" || target.attr("type").toLowerCase() == "radio")) {
    var checkedInput = $("input[name='" + to + "']:checked");
    if (!nullable) {
     if (checkedInput.length == 0) {
      SimpoValidate.hilight(target, msg);
      return false;
     }
    }
   }

   //input或select
   if (target[0].tagName.toLowerCase() == "input" || target[0].tagName.toLowerCase() == "select") {
    var val = target.val();
    if (!nullable) {
     if ($.trim(val) == "") {
      SimpoValidate.hilight(target, msg);
      return false;
     }
    }
    else {
     if ($.trim(val) == "") {
      SimpoValidate.removehilight(target, msg);
      return true;
     }
    }

    if (rule) {
     var reg = new RegExp(rule);
     if (!reg.test(val)) {
      SimpoValidate.hilight(target, msg);
      return false;
     }
    }

    if (ajaxAction) {
     SimpoValidate.ajaxCheck(target, val, ajaxAction);
    }
   }
   else if (target[0].tagName.toLowerCase() == "textarea") {
    var val = target.text();
    if (!nullable) {
     if ($.trim(val) == "") {
      SimpoValidate.hilight(target, msg);
      return false;
     }
    }
    else {
     if ($.trim(val) == "") {
      SimpoValidate.removehilight(target, msg);
      return true;
     }
    }

    if (rule) {
     var reg = new RegExp(rule);
     if (!reg.test(val)) {
      SimpoValidate.hilight(target, msg);
      return false;
     }
    }

    if (ajaxAction) {
     SimpoValidate.ajaxCheck(target, val, ajaxAction);
    }
   }
  }

  return true;
 },

 ajaxCheckResult: true,

 ajaxCheck: function (target, value, ajaxAction) {
  var targetName = target.attr("name");
  var data = new Object();
  data[targetName] = value;

  $.ajax({
   url: ajaxAction,
   type: "POST",
   data: data,
   async: false,
   success: function (data) {
    if (data.data == true) {
     SimpoValidate.removehilight(target);
    }
    else {
     SimpoValidate.ajaxCheckResult = false;
     SimpoValidate.hilight(target, data.data);
    }
   }
  });
 },

 //获取验证规则
 getRule: function (validSpan) {
  var rule = validSpan.attr("rule");
  switch ($.trim(rule)) {
   case "int":
    return this.rules.int;
   case "number":
    return this.rules.number;
   default:
    return rule;
    break;
  }
 },

 //红边框及错误提示
 hilight: function (target, msg) {
  target.addClass("failvalid");
  target.bind("mouseover", function (e) {
   SimpoValidate.tips(target, msg, e);
  });
  target.bind("mouseout", function () {
   SimpoValidate.removetips();
  });
 },

 //取消红边框及错误提示
 removehilight: function (target) {
  target.unbind("mouseover");
  target.unbind("mouseout");
  target.removeClass("failvalid");
  SimpoValidate.removetips();
 },

 //显示提示
 tips: function (target, text, e) {
  var divtipsstyle = "position: absolute; z-index:99999; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; font-size:12px;";
  $("body").append("
" + text + "
");

  var divtips = $(".div-tips");
  divtips.css("visibility", "visible");

  var top = e.clientY + $(window).scrollTop() - divtips.height() - 18;
  var left = e.clientX;
  divtips.css("top", top);
  divtips.css("left", left);

  $(target).mousemove(function (e) {
   var top = e.clientY + $(window).scrollTop() - divtips.height() - 18;
   var left = e.clientX;
   divtips.css("top", top);
   divtips.css("left", left);
  });
 },

 //移除提示
 removetips: function () {
  $(".div-tips").remove();
 }
};

$(function () {
 SimpoValidate.init();
});

如何使用：

Edit页面：

@using Model.Suya;
@{
 ViewBag.Title = "Add";
 Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
 List postList = (List)ViewData["postList"];
 sys_post post = (sys_post)ViewData["post"];
}

 




 

  

   基础信息
  
  

   



      *岗位名称：
     
     

      
     
     

      *岗位编号：
     
     

      
      
     
    


      * 所属部门：
     
     

      

     

      *汇报对象：
     
     

      ==请选择==
       @foreach (sys_post item in postList)
       {
        if (item.postCode == post.reportPostCode)
        {
        @item.postName
        }
        else
        {
        @item.postName
        }
       }
      
     

    


      *岗位级别：
     
     

      ==请选择==
1
2
3
4
5
6
     

     

     
     

     
    


      *备注：
     
     

      @post.remarks
     
    


 

效果图：

以上所述就是本文的全部内容了，希望大家能够喜欢。