使用vue自定义指令开发表单验证插件validate.js

使用Vue自定义指令开发表单验证插件validate.js的完整攻略主要包含以下几个步骤：

创建Vue自定义指令
定义表单验证规则
在自定义指令中执行表单验证
绑定自定义指令到表单元素
完善表单验证插件

下面将对这些步骤进行详细讲解：

创建Vue自定义指令

首先需要使用Vue的directive方法来创建一个自定义指令，如下所示：

Vue.directive('validate', {
  bind: function (el, binding, vnode) {
    // TODO
  }
});

其中，bind钩子函数在指令绑定到元素时被调用，可以在其中编写自定义指令的逻辑。

定义表单验证规则

在自定义指令中需要定义表单验证规则，可以通过传入一个对象来实现，例如：

Vue.directive('validate', {
  bind: function (el, binding, vnode) {
    const rules = binding.value; // 表单验证规则
    // TODO
  }
});

这里binding.value就是在绑定指令时传入的表单验证规则对象。

表单验证规则对象一般包含了表单各个表单控件的验证规则，例如：

{
    username: {
        required: true,
        minlength: 6,
        maxlength: 20
    },
    password: {
        required: true,
        minlength: 6,
        maxlength: 20
    }
}

以上的表单验证规则定义了用户名和密码两个表单控件，分别包含了必填、最小长度和最大长度三个验证规则。

在自定义指令中执行表单验证

在自定义指令中需要执行表单验证，如果验证失败需要给表单控件添加样式并提示错误信息，例如：

Vue.directive('validate', {
  bind: function (el, binding, vnode) {
    const rules = binding.value; // 表单验证规则
    el.addEventListener('blur', function () {
      const value = el.value.trim();
      if (!value) {
        el.classList.add('error');
        el.dataset.error = '该项必填';
        return;
      }
      if (value.length < rules.minlength || value.length > rules.maxlength) {
        el.classList.add('error');
        el.dataset.error = `长度应在${rules.minlength}-${rules.maxlength}之间`;
        return;
      }
      el.classList.remove('error');
      delete el.dataset.error;
    });
  }
});

以上代码中，给表单元素设置了一个blur事件处理函数，在表单元素失去焦点时执行表单验证。

如果表单元素的值为空，则添加error样式并设置data-error属性为错误信息；如果表单元素的值不符合长度要求，则同样添加error样式并设置data-error属性为错误信息；如果表单验证通过，则移除error样式并删除data-error属性。

绑定自定义指令到表单元素

最后需要把自定义指令绑定到表单元素上，例如：

<input type="text" v-validate="{ required: true, minlength: 6, maxlength: 20 }">

以上代码中，使用v-validate指令并传入表单验证规则对象，即可绑定表单验证插件到此表单元素上。

完善表单验证插件

上述实现只是一个简单的表单验证插件实现，还有很多可以完善的地方，例如：

支持多种表单控件验证，如email、phone等
支持异步验证，如后台接口数据验证
支持自定义错误信息展示方式，如弹窗、提示框等

示例1：

<div id="app">
  <form>
    <div>
      <label>用户名</label>
      <input type="text" v-validate="{ required: true, minlength: 6, maxlength: 20 }">
      <span class="error" v-if="'error' in $refs.form.username.dataset">{{ $refs.form.username.dataset.error }}</span>
    </div>
    <div>
      <label>密码</label>
      <input type="password" v-validate="{ required: true, minlength: 6, maxlength: 20 }">
      <span class="error" v-if="'error' in $refs.form.password.dataset">{{ $refs.form.password.dataset.error }}</span>
    </div>
    <div>
      <label>确认密码</label>
      <input type="password" v-validate="{ required: true, minlength: 6, maxlength: 20, equalTo: 'password' }">
      <span class="error" v-if="'error' in $refs.form.confirm.dataset">{{ $refs.form.confirm.dataset.error }}</span>
    </div>
    <button type="button" @click="submit">提交</button>
  </form>
</div>

Vue.directive('validate', {
  bind: function (el, binding, vnode) {
    const rules = binding.value; // 表单验证规则
    el.addEventListener('blur', function () {
      const value = el.value.trim();
      if (!value) {
        el.classList.add('error');
        el.dataset.error = '该项必填';
        return;
      }
      if (rules.minlength && value.length < rules.minlength) {
        el.classList.add('error');
        el.dataset.error = `长度应大于等于${rules.minlength}`;
        return;
      }
      if (rules.maxlength && value.length > rules.maxlength) {
        el.classList.add('error');
        el.dataset.error = `长度应小于等于${rules.maxlength}`;
        return;
      }
      if (rules.equalTo) {
        const equalToEl = document.querySelector(`[name="${rules.equalTo}"]`);
        if (equalToEl && value !== equalToEl.value.trim()) {
          el.classList.add('error');
          el.dataset.error = '两次输入不一致';
          return;
        }
      }
      el.classList.remove('error');
      delete el.dataset.error;
    });
  }
});

const app = new Vue({
  el: '#app',
  methods: {
    submit() {
      const els = document.querySelectorAll('[v-validate]');
      let valid = true;
      els.forEach((el) => {
        el.dispatchEvent(new Event('blur'));
        if ('error' in el.dataset) {
          valid = false;
        }
      });
      if (valid) {
        alert('表单验证通过');
      }
    }
  }
});

以上代码实现了一个包含用户名、密码和确认密码等表单控件的表单验证插件，其中确认密码需要和密码字段一致。

示例2：

<div id="app">
  <form>
    <div>
      <label>手机号码</label>
      <input type="text" v-validate="{ required: true, phone: true }">
      <span class="error" v-if="'error' in $refs.form.phone.dataset">{{ $refs.form.phone.dataset.error }}</span>
    </div>
    <button type="button" @click="submit">提交</button>
  </form>
</div>

Vue.directive('validate', {
  bind: function (el, binding, vnode) {
    const rules = binding.value; // 表单验证规则
    el.addEventListener('blur', function () {
      const value = el.value.trim();
      if (!value) {
        el.classList.add('error');
        el.dataset.error = '该项必填';
        return;
      }
      if (rules.phone && !/^1[3456789]\d{9}$/.test(value)) {
        el.classList.add('error');
        el.dataset.error = '手机号码格式不正确';
        return;
      }
      el.classList.remove('error');
      delete el.dataset.error;
    });
  }
});

const app = new Vue({
  el: '#app',
  methods: {
    submit() {
      const els = document.querySelectorAll('[v-validate]');
      let valid = true;
      els.forEach((el) => {
        el.dispatchEvent(new Event('blur'));
        if ('error' in el.dataset) {
          valid = false;
        }
      });
      if (valid) {
        alert('表单验证通过');
      }
    }
  }
});

以上代码实现了一个手机号码格式验证规则，只有符合手机号码格式才会通过验证。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用vue自定义指令开发表单验证插件validate.js - Python技术站