So verwenden Sie die Formularvalidierungsfunktion in der Vue-Dokumentation

Vue ist ein progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen. Der Fokus von Vue liegt auf seiner Einfachheit und Flexibilität, die in nahezu jedem Projekt eingesetzt werden kann. Als Frontend-Entwickler müssen wir häufig Funktionen zur Formularvalidierung verwenden. Die Vue-Dokumentation bietet einige Formularvalidierungsfunktionen, die sehr praktisch sind und Entwicklern dabei helfen können, die Formularvalidierung effizienter durchzuführen. In diesem Artikel wird die Verwendung der Formularvalidierungsfunktion im Vue-Dokument vorgestellt.

Zuerst müssen wir v-model in der Vue-Vorlage verwenden, um den Wert des Formularfelds zu binden. Der folgende Code verwendet beispielsweise das V-Modell, um den Wert eines Eingabefelds zu binden: v-model绑定表单字段的值。例如，以下代码使用v-model绑定一个输入框的值：

<template>
  <div>
    <input type="text" v-model="username">
  </div>
</template>

在Vue文档中，表单验证函数包含在Vue的实例方法$validator中。要使用表单验证函数，我们需要先通过Vue.use(VeeValidate)引入VeeValidate插件，这是Vue官方推荐的表单验证插件。

在引入VeeValidate之后，我们可以在Vue实例的生命周期中调用$validator方法，例如在created()方法中，以便在Vue实例被创建时完成初始化。

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';  // 引入VeeValidate插件
Vue.use(VeeValidate);  // 使用VeeValidate
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {  // 将验证器语言设置为中文
      messages: {
        required: (field) => `${field}不能为空`,
      },
    });
  }
}

上述代码中，在created()方法中，我们使用this.$validator.localize()方法将验证器的语言设置为中文，并定义了一条自定义错误消息。这里的required是一个默认的VeeValidate规则，它表示此项字段必填。在本例中，自定义错误消息是“用户名不能为空”。

现在，我们定义了一个自定义的VeeValidate规则checkUsernameAvailable，在本例中，它是用来检查用户名是否可用的。在该规则中，我们可以访问输入框绑定的值，然后我们可以使用Axios请求POST方法将该值发送到服务器。如果返回的结果是数据状态码为200，则表示该用户名可用，否则表示用户名不可用。

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import axios from 'axios';
Vue.use(VeeValidate);
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {
      messages: {
        required: (field) => `${field}不能为空`,
        checkUsernameAvailable: (field) => `${field}已经被注册了`,
      },
    });

    this.$validator.extend('checkUsernameAvailable', {
      getMessage: (field, params, data) => data.message,
      validate: async (value) => {
        const { data } = await axios.post('/api/checkusername', {
          username: value,
        });
        return {
          valid: data.status === 200,
          data: data,
        };
      },
    });
  }
}
</script>

在上述代码中，我们定义了一个带有自定义函数的验证规则checkUsernameAvailable，该规则使用异步/await来等待Axios的POST方法响应。如果响应中的状态码为200，则返回true，否则返回false。

最后，我们需要将这个验证规则绑定到HTML表单中。在表单元素中添加data-vv-validate属性，这告诉Vue Validator开始验证该表单。然后，我们在需要验证的表单元素中添加自定义规则v-validate="{ rules: { checkUsernameAvailable: true } }"。这告诉Vue Validator使用我们自定义的验证规则。

<template>
  <div>
    <form @submit.prevent="">
      <div>
        <input type="text" name="username" v-model="username" data-vv-validate="''" v-validate="{ rules: { checkUsernameAvailable: true } }" placeholder="请输入用户名">
        <div v-show="errors.has('username')" class="invalid-feedback">{{ errors.first('username') }}</div>
      </div>
      <button @click="submitForm">提交</button>
    </form>
  </div>
</template>

在上述代码中，我们在输入框中添加了一个错误消息v-show="errors.has('username')"rrreee

In der Vue-Dokumentation ist die Formularvalidierungsfunktion in der Vue-Instanzmethode $validator enthalten. Um die Formularvalidierungsfunktion verwenden zu können, müssen wir zunächst das VeeValidate-Plug-in über Vue.use(VeeValidate) einführen, das offiziell empfohlene Formularvalidierungs-Plug-in für Vue.

Nach der Einführung von VeeValidate können wir die Methode $validator im Lebenszyklus der Vue-Instanz aufrufen, beispielsweise in der Methode created(), sodass beim Vue Instanz wird erstellt. Vollständige Initialisierung.

rrreee

Im obigen Code verwenden wir in der Methode created() die Methode this.$validator.localize(), um die Sprache des Validators auf Chinesisch festzulegen und definieren Sie eine benutzerdefinierte Fehlermeldung erstellen. Der required hier ist eine standardmäßige VeeValidate-Regel, die angibt, dass dieses Feld erforderlich ist. In diesem Beispiel lautet die benutzerdefinierte Fehlermeldung „Benutzername darf nicht leer sein.“ 🎜🎜Jetzt definieren wir eine benutzerdefinierte VeeValidate-Regel checkUsernameAvailable. In diesem Fall wird damit überprüft, ob der Benutzername verfügbar ist. In dieser Regel haben wir Zugriff auf den an das Eingabefeld gebundenen Wert und können dann die Axios-Request-POST-Methode verwenden, um diesen Wert an den Server zu senden. Wenn das zurückgegebene Ergebnis einen Datenstatuscode von 200 hat, bedeutet dies, dass der Benutzername verfügbar ist, andernfalls bedeutet dies, dass der Benutzername nicht verfügbar ist. 🎜rrreee🎜Im obigen Code definieren wir eine Validierungsregel checkUsernameAvailable mit einer benutzerdefinierten Funktion, die asynchronous/await verwendet, um auf die Antwort der POST-Methode von Axios zu warten. Wenn der Statuscode in der Antwort 200 ist, wird true zurückgegeben, andernfalls wird false zurückgegeben. 🎜🎜Zuletzt müssen wir diese Validierungsregel an das HTML-Formular binden. Fügen Sie dem Formularelement das Attribut data-vv-validate hinzu. Dadurch wird Vue Validator angewiesen, mit der Validierung des Formulars zu beginnen. Anschließend fügen wir benutzerdefinierte Regeln v-validate="{ Rules: { checkUsernameAvailable: true } }" in den Formularelementen hinzu, die eine Validierung erfordern. Dadurch wird Vue Validator angewiesen, unsere benutzerdefinierten Validierungsregeln zu verwenden. 🎜rrreee🎜Im obigen Code haben wir eine Fehlermeldung v-show="errors.has('username')" zum Eingabefeld hinzugefügt. Wenn die Fehlermeldung nicht leer ist, wird die Meldung angezeigt gezeigt werden. 🎜🎜Jetzt haben wir die Erstellung und Bindung benutzerdefinierter Validierungsregeln abgeschlossen. Wenn der Wert im Eingabefeld für den Benutzernamen auf der Serverseite verfügbar ist, übermittelt das Formular die Daten. Andernfalls zeigt Vue Validator eine benutzerdefinierte Fehlermeldung an. 🎜🎜Insgesamt ist Vue Validator ein sehr leistungsstarkes und benutzerfreundliches Formularvalidierungs-Plugin. Vue bietet Front-End-Entwicklern eine hervorragende Plattform für die schnelle Entwicklung von Formularvalidierungen. Die Verwendung von Vue Validator ist leicht zu verstehen und kann die Entwicklungseffizienz erheblich verbessern. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Formularvalidierungsfunktion in der Vue-Dokumentation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!