如何將 Focus 自動跳到 VeeValidate 驗證錯誤欄位 ?

栏目: JavaScript · 发布时间: 6年前

内容简介:實務上在驗證欄位時,不單單只是顯示錯誤訊息而已,實務上可能會需要Vue 2.5.17VeeValidate 2.1.2

實務上在驗證欄位時,不單單只是顯示錯誤訊息而已,實務上可能會需要 alert() 顯示錯誤訊息,還必須要將 Focus 回到錯誤欄位,VeeValidate 內建並沒有支援此功能,必須自行實作。

Version

Vue 2.5.17

VeeValidate 2.1.2

User Story

如何將 Focus 自動跳到 VeeValidate 驗證錯誤欄位 ?

  1. 按下 Submit 後使用 alert() 顯示錯誤訊息。

如何將 Focus 自動跳到 VeeValidate 驗證錯誤欄位 ?

  1. 將 focus 回到錯誤的欄位上

VeeValidate

demo.vue

<template>
  <div>
    <div>
      <input v-model="customEmail"
             v-validate="'required|custom-email'"
             name="customEmailAddress"
             type="text">
    </div>
    <div>
      <span>{{ errors.first('customEmailAddress') }}</span>
    </div>
    <div>
      <button @click="onSubmit">Submit</button>
    </div>
  </div>
</template>

<script>
import validator from '../validators/email';

validator();

/** data */
const data = function() {
  return {
    email: '',
    customEmail: '',
  };
};

/** methods */
const onSubmit = function() {
  const hasError = this.errors.items.length;
  const showFirstErrorMessage = () => alert(this.errors.items[0].msg);
  const name = this.errors.items[0].field;
  const setFocusOnErrorComponent = () => this.$root.$el.querySelector(`[name=${name}]`).focus();

  if (hasError) {
    showFirstErrorMessage();
    setFocusOnErrorComponent();
    return;
  }

  alert('no error');
};

const methods = {
  onSubmit,
};

export default {
  name: 'demo',
  data,
  methods,
};
</script>

33 行

const hasError = this.errors.items.length;

VeeValidate 的 errors object 會在 Vue Instance 下,而所有錯誤訊息都在 items array 下。

由於 ECMAScript 的 Truthy Value 特性,因此可用 length 作為 true 判斷。

34 行

const showFirstErrorMessage = () => alert(this.errors.items[0].msg);

其中第一個錯誤訊息,就是放在 items[0].msg property。

35 行

const name = this.errors.items[0].field;
const setFocusOnErrorComponent = () =>     this.$root.$el.querySelector(`[name=${name}]`).focus();

除了顯示錯誤訊息外,我們還希望將 focus 回到錯誤欄位。

由於 VeeValidate 都要使用 HTML 的 name ,因此我們可利用此特性抓到錯誤欄位。

使用 items[0].field 抓到第一個錯誤欄位的 name

利用 this.$root.$elquerySelect() 抓到該欄位,然後呼叫 focus()

38 行

if (hasError) {
  showFirstErrorMessage();
  setFocusOnErrorComponent();
  return;
}

若有任何 VeeValidate 驗證錯誤,使用 alert() 顯示錯誤訊息,並將 focus 回到錯誤欄位,一氣呵成。

Conclusion

  • VeeValidate 並沒有內建此功能,必須使用一些小技巧才能達成

Sample Code

完整的範例可以在我的 GitHub 上找到


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

人工智能

人工智能

腾讯研究院、中国信通院互联网法律研究中心、腾讯AI Lab、腾讯开放平台 / 中国人民大学出版社 / 2017-10-25 / 68.00元

面对科技的迅猛发展,中国政府制定了《新一代人工智能发展规划》,将人工智能上升到国家战略层面,并提出:不仅人工智能产业要成为新的经济增长点,而且要在2030年达到世界领先水平,让中国成为世界主要人工智能创新中心,为跻身创新型国家前列和经济强国奠定基础。 《人工智能》一书由腾讯一流团队与工信部高端智库倾力创作。本书从人工智能这一颠覆性技术的前世今生说起,对人工智能产业全貌、最新进展、发展趋势进行......一起来看看 《人工智能》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具