지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 나만의 자바스크립트 양식 검증 플러그인_javascript 기술 보유

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

WBOY
풀어 주다： 2016-05-16 15:08:13
원래의
1210명이 탐색했습니다.

사용이 매우 간단하고 나중에 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 양식 유효성 검사 플러그인입니다. 모두에게 도움이 되기를 바랍니다.

관련 라벨：
javascript表单验证插件 javascript表单验证
원천：php.cn
이전 기사：JS 프런트엔드 함수 throttling_javascript 기술에서 setTimeout의 영리한 사용법 다음 기사：JS는 클릭 로그인 팝업창과 배경색 그라데이션 애니메이션 effect_javascript 기술을 실현합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
React JSX에서 양식 유효성 검사 문제에 대한 솔루션은 무엇입니까? React에서 유효성 검사 양식을 만들려고 하는데 사용자 등록 데이터 저장을 추가하니 문제가 많이 발생합니다. importReact,{useState}from&q...
에서 2024-04-03 11:53:49
0
1
315
WooCommerce Checkout - 사용자 역할 및 장바구니 내용 확인 WooCommerce의 결제 프로세스에 문제가 있습니다. 저는 일반 제품과 B2B 제품을 구별하기 위해 "B2BforWooCommerce" 플러...
에서 2024-04-03 11:58:52
0
1
475
URL 쿼리 문자열을 사용하여 양식 필드에 텍스트를 미리 로드합니다. 쿼리 문자열을 사용하여 두 개의 CeDiplomaValidation 양식 요소를 미리 채우는 이 웹 페이지의 URL을 생성하고 싶습니다. 다음 URL을 사용하여 ...
에서 2024-03-30 19:21:10
0
1
271
유효한 이메일 주소에도 불구하고 Javascript를 사용한 이메일 확인이 작동하지 않습니다. 저는 html과 javascript를 사용하여 두 개의 양식을 만들고 있습니다. 하나는 "로그인"용이고 다른 하나는 "등록"용...
에서 2024-03-30 14:49:34
0
1
333
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿