這篇文章主要幫助大家擁有一個屬于自己的javascript表單驗證插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下

自己編寫了一個表單驗證插件，使用起來很簡單，以后還可以擴展更多的功能，比如ajax驗證。

每個需要驗證的表單元素下面有一個span標(biāo)簽，這個標(biāo)簽的class有一個valid表示需要驗證，如果有nullable則表示可為空；rule表示驗證規(guī)則，msg表示錯誤提示信息；to表示要驗證的元素的name值，如果元素是單個的，to可以不寫。該插件會遍歷每個有valid的span標(biāo)簽，找出它前面需要驗證的元素，根據(jù)rule驗證，如果驗證不通過，則顯示邊框為紅色，鼠標(biāo)放在元素上時顯示錯誤信息。

驗證時機：1、點擊提交按鈕時顯式調(diào)用驗證方法；2、當(dāng)元素觸發(fā)blur時驗證。

插件代碼：

CSS：

.failvalid

{

 border: solid 2px red !important;

}

JS：

/**

* 驗證插件

*/

SimpoValidate = {

 //驗證規(guī)則

 rules: {

  int: /^[1-9]\d*$/,

  number: /^[+-]?\d*\.?\d+$/

 },

 //初始化

 init: function () {

  $("span[class*='valid']").each(function () { //遍歷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 () {

  var bl = true;

  $("span[class*='valid']").each(function () { //遍歷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;

 },

 //單個驗證，驗證成功返回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");

  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;

     }

    }

   }

   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;

     }

    }

   }

  }

  return true;

 },

 //獲取驗證規(guī)則

 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; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; ";

  $("body").append("<div class='div-tips' style='" + divtipsstyle + "'>" + text + "</div>");

  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();

});

如何使用：

1、引用CSS和JS(必須引用jQuery)：

<link type="text/css" href="~/Scripts/SimpoValidate.css" rel="stylesheet" />

<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>

<script type="text/javascript" src="~/Scripts/ValidateUtil.js"></script>

2、表單HTML代碼(部分代碼)：

<table class="table-test" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">

 <tr>

  <td>

   <input name="c" value="" type="text" />

   <span class="valid nullable" rule="int" msg="可為空，請?zhí)顚懻麛?shù)"></span>

  </td>

 </tr>

 <tr>

  <td>

   <input name="d" value="" type="text" />

   <span class="valid" rule="number" msg="必填，請?zhí)顚憯?shù)字"></span>

  </td>

 </tr>

 <tr>

  <td>

   <select>

    <option value="-1">==請選擇==</option>

    <option value="1">是</option>

    <option value="2">否</option>

   </select>

   <span class="valid" rule="^(?!-1$).+$" msg="必選"></span>

  </td>

 </tr>

 <tr>

  <td>

   <input name="a" value="1" type="checkbox" />

   <span>多</span>

   <input name="a" value="2" type="checkbox" />

   <span>少</span>

   <span class="valid" rule="" msg="必選" to="a"></span>

  </td>

 </tr>

 <tr>

  <td>

   <input name="b" value="1" type="radio" />

   <span>狗</span>

   <input name="b" value="2" type="radio" />

   <span>貓</span>

   <span class="valid" rule="" msg="必選" to="b"></span>

  </td>

 </tr>

 <tr>

  <td>

   <textarea cols="20" rows="5" style="height: 50px; width: 300px;"></textarea>

   <span class="valid nullable" rule="^(.|\n){5,100}$" msg="可為空，長度必須大于等于5小于等于100"></span>

  </td>

 </tr>

</table>

3、執(zhí)行驗證JS代碼：

//保存數(shù)據(jù)

function save() {

 if (SimpoValidate.valid()) { //執(zhí)行驗證

  $("#frm").submit(); //提交表單

 }

}

效果圖：

以上就是作者自己動手編寫的javascript表單驗證插件，希望能夠幫助到大家。