나만의 자바스크립트 양식 검증 플러그인_javascript 기술 보유

사용이 매우 간단하고 나중에 Ajax 유효성 검사와 같은 더 많은 기능으로 확장될 수 있는 양식 유효성 검사 플러그인을 작성했습니다.

확인해야 하는 각 양식 요소 아래에 범위 태그가 있습니다. 이 태그의 클래스에는 확인이 필요하다는 의미가 있습니다. 이는 null 허용 여부가 비어 있을 수 있음을 의미합니다. , msg는 오류 메시지를 의미하며, 확인해야 할 요소의 이름 값을 의미합니다. 이 플러그인은 유효한 각 범위 태그를 순회하여 앞에 있는 확인해야 할 요소를 찾고 규칙에 따라 확인합니다. 확인에 실패하면 표시 테두리가 빨간색이 되고 오류 메시지가 표시됩니다. 요소 위에 마우스를 놓으면 표시됩니다.

확인 시기: 1. 제출 버튼을 클릭할 때 확인 방법을 명시적으로 호출합니다. 2. 요소가 블러를 트리거할 때 확인합니다.

플러그인 코드:

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

사용방법:

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="可为空，请填写正整数"></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. 검증 JS 코드 실행:

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

렌더링:

위 내용은 작성자가 직접 작성한 JavaScript 양식 유효성 검사 플러그인입니다. 모두에게 도움이 되기를 바랍니다.