Verfügen Sie über eigene Javascript-Formularvalidierungs-Plug-in_Javascript-Kenntnisse

Ich habe ein Formularvalidierungs-Plug-in geschrieben, das sehr einfach zu verwenden ist und in Zukunft um weitere Funktionen erweitert werden kann, wie zum Beispiel die Ajax-Validierung.

Unter jedem Formularelement gibt es ein Span-Tag, das überprüft werden muss. Die Klasse dieses Tags muss überprüft werden. Wenn es eine Nullable-Regel gibt, bedeutet dies, dass es eine Validierungsregel ist , msg bedeutet Fehlermeldung; to bedeutet, dass der Namenswert des zu überprüfenden Elements möglicherweise nicht geschrieben wird. Dieses Plug-in durchläuft jedes gültige Span-Tag, um das Element davor zu finden, das überprüft werden muss, und überprüft es gemäß der Regel. Wenn die Überprüfung fehlschlägt, wird der Anzeigerahmen rot und eine Fehlermeldung angezeigt angezeigt, wenn die Maus auf dem Element platziert wird.

Überprüfungszeitpunkt: 1. Rufen Sie die Überprüfungsmethode explizit auf, wenn auf die Schaltfläche „Senden“ geklickt wird. 2. Überprüfen Sie, wann das Element Unschärfe auslöst.

Plug-in-Code:

CSS:

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

JS:

/**
* 验证插件
*/

SimpoValidate = {
 //验证规则
 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;
 },

 //获取验证规则
 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();
});

Anwendung:

1. Zitieren Sie CSS und JS (jQuery muss in Anführungszeichen gesetzt werden):

<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-Code bilden (Teil des Codes):

<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="可为空，请填写正整数"></span>
  </td>
 </tr>
 <tr>
  <td>
   <input name="d" value="" type="text" />
   <span class="valid" rule="number" msg="必填，请填写数字"></span>
  </td>
 </tr>
 <tr>
  <td>
   <select>
    <option value="-1">==请选择==</option>
    <option value="1">是</option>
    <option value="2">否</option>
   </select>
   <span class="valid" rule="^(&#63;!-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. Führen Sie den Verifizierungs-JS-Code aus:

//保存数据
function save() {
 if (SimpoValidate.valid()) { //执行验证
  $("#frm").submit(); //提交表单
 }
}

Rendering:

Das Obige ist das Javascript-Formularvalidierungs-Plug-in, das vom Autor selbst geschrieben wurde. Ich hoffe, es kann jedem helfen.