自己編寫的支援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("<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();});

 如何使用：

 Edit頁面：

@using Model.Suya;@{ ViewBag.Title = "Add"; Layout = "~/Views/Shared/_Layout.cshtml";}@{ List<sys_post> postList = (List<sys_post>)ViewData["postList"]; sys_post post = (sys_post)ViewData["post"];}<script type="text/javascript"> $(function () {  //部門樹  $('#dept').combotree({   url: 'GetDeptTree',   required: false,   checkbox: true,   onLoadSuccess: function () {    $('#dept').combotree('setValue', "@(post.depCode)");   }  });  //操作結果  $("#ifrm").load(function (data) {   var data = eval("(" + $("#ifrm").contents().find("body").html() + ")");   alert(data.msg);   if (data.ok) back();  });  $("select[name='postLevel']").find("option[value='@(post.postLevel)']").attr("selected", "selected"); }); //儲存 function save() {  if (valid()) {   $("#frm").submit();  } } //驗證 function valid() {  var dept = $("input[name='dept']");  if (!dept.val()) {   SimpoValidate.hilight(dept.parent(), "請選擇所屬部門");  } else {   SimpoValidate.removehilight(dept.parent());  }  return SimpoValidate.valid(); } //返回 function back() {  parent.$('#ttTab').tabs('select', "崗位管理");  var tab = parent.$('#ttTab').tabs('getSelected');  tab.find("iframe").contents().find("#btnSearch").click();  parent.$("#ttTab").tabs('close', '修改崗位資訊'); }</script><div class="tiao"> <input type="button" class="submit_btn" value="儲存" onclick="save()" /> <input type="button" class="submit_btn" value="返回" onclick="back()" /></div><iframe id="ifrm" name="ifrm" style="display: none;"></iframe><form id="frm" method="post" enctype="multipart/form-data" action="/HR/PostManage/SaveEdit?id=@(post.id)"target="ifrm"><div class="adminMainContent"> <div class="box">  <div class="box-title">   基礎資訊  </div>  <div class="box-content">   <table cellpadding="0" cellspacing="0" class="detail" width="100%">    <tr>     <td class="title">      <span class="mst">*</span>崗位名稱：     </td>     <td style="width: 35%;">      <input type="text" class="xinxi_txt" name="postName" value="@post.postName" />      <span class="valid" msg="必填，且長度不能超過50" rule="^(.|\n){0,50}$"></span>     </td>     <td class="title">      <span class="mst">*</span>崗位編號：     </td>     <td style="width: 35%;">      <input type="text" class="xinxi_txt" name="postCode" value="@post.postCode" />      <span class="valid" msg="必填，且長度不能超過20" rule="^(.|\n){0,20}$" ajaxaction="/HR/PostManage/AjaxCheckPostCode?id=@post.id">      </span>     </td>    </tr>    <tr>     <td class="title">      <span class="mst">*</span> 所屬部門：     </td>     <td style="width: 35%;">      <input type="text" name="depCode" id="dept" class="easyui-combotree" style="height: 30px;" />     </td>     <td class="title">      <span class="mst">*</span>彙報對象：     </td>     <td style="width: 35%;">      <select class="xueli" name="reportPostCode" id="agreementType">       <option value="" selected="selected">==請選擇==</option>       @foreach (sys_post item in postList)       {        if (item.postCode == post.reportPostCode)        {        <option value="@item.postCode" selected="selected">@item.postName</option>        }        else        {        <option value="@item.postCode">@item.postName</option>        }       }      </select>      <span class="valid" msg="請選擇合約分類">     </td>    </tr>    <tr>     <td class="title">      <span class="mst">*</span>崗位層級：     </td>     <td style="width: 35%;">      <select class="xueli" name="postLevel">       <option value="" selected="selected">==請選擇==</option>       <option value="1">1</option>       <option value="2">2</option>       <option value="3">3</option>       <option value="4">4</option>       <option value="5">5</option>       <option value="6">6</option>      </select>      <span class="valid" msg="請選擇崗位層級">     </td>     <td class="title">     </td>     <td style="width: 35%;">     </td>    </tr>    <tr>     <td class="title">      <span class="mst">*</span>備忘：     </td>     <td colspan="3" style="width: 35%;">      <textarea name="remarks" style="width: 500px;">@post.remarks</textarea>      <span class="valid" msg="長度不得超過500" rule="^(.|\n){0,500}$"></span>     </td>    </tr>   </table>  </div> </div></div></form>

效果圖：

以上所述就是本文的全部內容了，希望大家能夠喜歡。