Question

当输入字段需要更多信息时，浏览器会在气泡中显示一条消息，说明输入无效的原因。我想在vue中阻止此默认设置，但是我不确定如何。下面是我在JavaScript中的处理方式，但在Vue中，可能有一种方法可以像我所知道的那样以事件监听器的形式在@invalid上执行@submit。我也想知道是否需要额外的预防措施来防止在ios或android中发生这种情况。

HTML

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

JS

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

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

Answer 1

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

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

Answer 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 ）。

Vue删除无效的输入消息

2 个答案: