Vue删除无效输入消息答案

【问题标题】：Vue remove invalid input messageVue删除无效输入消息
【发布时间】：2020-11-04 04:10:32
【问题描述】：

当输入字段需要更多信息时，浏览器会在气泡中显示一条消息，说明输入无效的原因。我想在 vue 中阻止默认设置，但我不确定如何。下面是我在 JavaScript 中的做法，但在 Vue 中，可能有一种方法可以做到 @invalid，就像我知道你可以在表单上作为 eventListener 做 @submit 一样。我还想知道是否需要额外的预防措施来防止在 ios 或 android 中发生这种情况。

HTML

<form>
  <input type="text" required>
  <input type="submit">
 </form>

document.querySelector( "input" ).addEventListener( "invalid",
 function( event ) {
        event.preventDefault();
  });

https://codepen.io/albert-anthony4962/pen/BajORVZ

【问题讨论】：

嗨 albert_anthony6！你能发一个sandbox 来展示你看到的行为吗？
是的。第一个输入是我所寻求的。禁用消息。第二个输入显示默认消息。 codepen.io/albert-anthony4962/pen/BajORVZ
感谢您添加该代码笔！不幸的是，我认为它并没有真正说明问题？？？？页面中似乎没有包含 Vue，而且我没有看到任何验证消息正在显示

标签： javascript html forms vue.js

【解决方案1】：

如果您想完全禁用验证，可以将novalidate="true" 添加到您的form 元素中。

我怀疑您可能只想在初始页面加载时执行此操作。如果是这样，您能否更新您的部分并希望添加一个示例？之后我可以更新我的答案?

【讨论】：

我只想禁用消息，novalidate 会覆盖我不想要的所需属性。请只禁用该消息

【解决方案2】：

我的一个模式（来自 Vuetify 的想法）非常简单：

new Vue({
  el: "#app",
  data: {
    isFormValid: null,
    form: {
      input_1: {
        text: null,
        rules: ['required', 'min3'],
        validateText: null
      },
      input_2: {
        text: null,
        rules: ['required'],
        validateText: null
      }
    },
    rules: {
      required: v => !!v && !![...v].length || 'This field is required.',
      min3: v => !!v && !!([...v].length > 2) || 'This field must be at least 3 characters long.'
    }
  },
  methods: {
    validateForm() {
      const validated = []
      for (let key in this.form) {
        const v = this.form[key].rules.map(e => {
          return this.rules[e](this.form[key].text)
        })
        if (v.some(e => e !== true)) {
          this.form[key].validateText = v.filter(e => e !== true)[0]
          validated.push(false)
        } else {
          this.form[key].validateText = "This field is valid."
          validated.push(true)
        }
      }
      return validated.every(e => e === true)
    },
    submitForm() {
      if (this.validateForm()) {
        // submit logic
        this.isFormValid = "Yes, it's valid."
      } else {
        // not valid logic:
        this.isFormValid = "No, it's not valid."
      }
    },
    resetValidation() {
      const form = JSON.parse(JSON.stringify(this.form))
      for (let key in form) {
        form[key].validateText = null
      }
      this.isFormValid = null
      this.form = form
    },
    resetForm() {
      const form = JSON.parse(JSON.stringify(this.form))
      for (let key in form) {
        form[key].validateText = null
        form[key].text = null
      }
      this.isFormValid = null
      this.form = form
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form ref="formRef">
    <label for="input_1">
      Input 1: 
      <input
        id="input_1"
        type="text"
        v-model="form.input_1.text"
      />
    </label>
    <div>This field will validate if NOT EMPTY AND HAS AT LEAST 3 CHARS</div>
    <div>{{ form.input_1.validateText || '&nbsp;' }}</div>
    <br />
    <label for="input_2">
      Input 2: 
      <input
        id="input_2"
        type="text"
        v-model="form.input_2.text"
      />
    </label>
    <div>This field will validate if NOT EMPTY</div>
    <div>{{ form.input_2.validateText || '&nbsp;' }}</div>
    <br />
    <button type="submit" @click.prevent="submitForm">
      SUBMIT
    </button>
    <div>Is the form valid? {{ isFormValid }}</div>
  </form>
  <button @click="resetValidation">RESET VALIDATION</button><br />
  <button @click="resetForm">RESET FORM</button>
</div>

这样您就不必忍受 HTML5“气泡”，但仍然可以验证您的表单 - 以您需要的任何方式。您可以使用遍历输入文本的函数来编写任何您想要的验证方案。您甚至可以提出regexp 验证、模式验证（如电话号码）等。这不是最好的解决方案，但非常“可插拔”。

这也应该是跨平台的（如果你使用 Vue）。

【讨论】：