JS实现支持Ajax验证的表单插件

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

验证时机：

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

插件代码： CSS：

JS：

插件 */

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 + "'],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) {
  //check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>或ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>
  if (target[0].tagName.toLowerCase() == "input" && target.attr("type") && (target.attr("type").toLowerCase() == "check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" || target.attr("type").toLowerCase() == "ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>")) {
    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,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页面：

postList = (List)ViewData["postList"]; sys_post post = (sys_post)ViewData["post"]; }