지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > self_javascript 기술로 작성된 Ajax 검증을 지원하는 JS 양식 검증 플러그인

self_javascript 기술로 작성된 Ajax 검증을 지원하는 JS 양식 검증 플러그인

WBOY
풀어 주다： 2016-05-16 15:58:48
원래의
1028명이 탐색했습니다.

저는 Ajax 유효성 검사를 지원하고 사용이 매우 간단한 양식 유효성 검사 플러그인을 작성했습니다.

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

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

플러그인 코드:

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();
});
로그인 후 복사

사용방법 :

편집 페이지: 

@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&#63;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&#63;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>
로그인 후 복사

렌더링:

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

관련 라벨：
javascript 表单验证
원천：php.cn
이전 기사：Node.js는 절묘한 은회색 수직 접기 menu_javascript 기술을 구현합니다. 다음 기사：javascript_javascript 스킬을 활용한 테이블 추가, 삭제, 수정 작업의 예시를 자세히 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿