집 > 기사 > 웹 프론트엔드 > Vue from-validate 양식 확인 코드 공유

Vue from-validate 양식 확인 코드 공유

小云云원래의: 2018-05-14 16:16:161577검색

이 글에서는 주로 Vue from-validate 양식 검증의 샘플 코드를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

서문

양식 데이터 확인이 필요합니다. 원래 HTML5를 사용하여 확인을 완료했지만 효과가 매우 낮고 유연성이 부족하여 온라인 플러그인이 너무 크고 크기가 커졌습니다. 프로젝트가 완료되지 않았습니다. 수요가 많지 않습니다.
그럼 직접 써볼까요!

지식 준비

vue의 맞춤 지침

자세한 내용은 공식 매뉴얼을 참조하세요. 링크는 다음과 같습니다: https://vuejs.org/v2/guide/custom-directive.html

일반적으로 그게 전부입니다. 지정된 후크 함수, 매개변수(el, 바인딩, vnode)

el: 바운드 dom
바인딩: 명령어의 다양한 속성
에서 함수로 점프하는 데 도움이 될 수 있습니다. vnode: Vue 컴파일에 의해 생성된 가상 노드

Start

1. 지침 선언

백바운드 후에는 매개변수가 바인딩되지 않으므로 클로저 방법이 사용된다는 점에 유의하세요

Vue.directive(&#39;validate&#39;, {
 // 在指令第一次背绑定上时调用
 bind(el, binding, vnode) {
 }
}

<form id="red-package" @submit.prevent="submit" v-validate.formData="validate">
 ...
 <button type="submit" class="save">保存</button>
</form>

2. 매개변수 구문 분석

Vue.directive(&#39;validate&#39;, {
 // vm对象，就是组件
 const vm = vnode.context;
 // 获得参数绑定的参数，就是规则对象
 const validate = binding.value;
 // 获得数据的key
 const dataKey = Object.keys(binding.modifiers)[0];
});

3. 입력 내용 변경 시 규칙 확인

el.addEventListener(&#39;change&#39;, (e) => {
 try {
  // 事件触发的input标签名
  const changeElName = e.srcElement.name;
  // 如果未设定规则不验证
  if (validate[changeElName]) {
   // 把表单的所有参数传入
   validate[changeElName](vm[dataKey]);
   // 检验成功添加成功的class
   Util.removeClass(e.srcElement, &#39;success&#39;);
  }
 } catch (err) {
  // 抛出异常添加失败的class
  Util.addClass(e.srcElement, &#39;error&#39;);
 }
});

4. 제출 시 모든 데이터 확인

// 有更好的方案
el.getElementsByTagName(&#39;button&#39;)[0].addEventListener(&#39;click&#39;, (e) => {
 try {
  // 遍历对象
  Object.keys(vm[dataKey]).forEach((item) => {
   if (validate[item]) {
    validate[item](vm[dataKey]);
   }
  });
 } catch (err) {
  // 抛出错误提示
  vm.loading({
   text: &#39;请检查参数&#39;,
  });
  vm.loaded(1000);
  // 阻止submit
  e.preventDefault();
 }
});

5. 확인 규칙 예시

amountRandomUpper({ budget, amountRandomUpper, amountRandomLower }) {
  if (amountRandomUpper < 1) {
    throw new Error(&#39;过小&#39;);
  }
  if (amountRandomUpper < amountRandomLower) {
    throw new Error(&#39;过小&#39;);
  }
  if (amountRandomUpper > budget) {
    throw new Error(&#39;过小&#39;);
  }
}

아직 질문이 많습니다. 좋은 제안을 지적해 주셨으면 좋겠습니다.

Vue from-validate 양식 확인 코드 공유

관련 기사