Vue from-validate form verification code sharing

This article mainly introduces the sample code of Vue from-validate form verification to you. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Foreword

Form data verification is required. HTML5 was originally used to complete the verification, but the effect was poor and not flexible enough, so it needed to be customized. For form validation, online plug-ins are too large, and the project does not have so many requirements.
Then let us write one ourselves!

Knowledge preparation

vue’s custom instructions

For details, please see the official manual, the link is as follows: https://vuejs.org /v2/guide/custom-directive.html

In general, it can help you jump to your function in the specified hook function, parameters (el, binding, vnode)

• el: bound dom

• binding: various attributes of the instruction

• vnode: Vue compilation Generated virtual node

Start

1. Instruction declaration

It should be noted that the parameters are at the back. After binding, it will not be blocked, so use closure method

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

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

2. Parse parameters

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

3. Verify the rules when the input content changes

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

4 , Verify all data when submitting

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

5. Verification rule example

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

End

There are still many problems in this, I hope you can point out any good suggestions.

Related recommendations:

vue, vue-validator implements form verification function

Detailed explanation of Bootstrap form verification function

form validation

The above is the detailed content of Vue from-validate form verification code sharing. For more information, please follow other related articles on the PHP Chinese website!