So verwenden Sie Vue und Element-UI zur Datenüberprüfung und Formularvalidierung

So verwenden Sie Vue und Element-UI zur Datenüberprüfung und Formularvalidierung

Einführung:
Im Prozess der Webanwendungsentwicklung ist die Formularvalidierung ein sehr wichtiger Teil. Es stellt sicher, dass vom Benutzer eingegebene Daten dem erwarteten Format und den erwarteten Anforderungen entsprechen, und verbessert so die Anwendungsstabilität und Datengenauigkeit. Vue.js ist derzeit ein sehr beliebtes JavaScript-Framework, und Element-UI ist eine Reihe von UI-Komponentenbibliotheken, die auf Vue.js basieren und eine Fülle von Formularkomponenten und Überprüfungsmethoden bereitstellen, um Entwicklern die Durchführung der Formularüberprüfung zu erleichtern. In diesem Artikel wird die Verwendung von Vue und Element-UI zur Datenüberprüfung und Formularvalidierung vorgestellt und entsprechende Codebeispiele beigefügt.

1. Installieren Sie Element-UI und konfigurieren Sie das Vue-Projekt.
Zuerst müssen wir Element-UI installieren und das Vue-Projekt konfigurieren. Element-UI kann über den folgenden Befehl installiert werden:

npm install element-ui --save

Fügen Sie dann Element-UI in die Datei main.js ein:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. Grundlegende Verwendung der Formularüberprüfung
Element-UI bietet eine Reihe von Überprüfungsmethoden und Anweisungen. Die Formularvalidierung kann problemlos durchgeführt werden. Das Folgende ist ein einfaches Beispiel, das zeigt, wie Element-UI für die grundlegende Formularvalidierung verwendet wird:

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '用户名长度在3到10个字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，可以提交表单
          console.log('表单验证通过');
        } else {
          // 表单验证不通过
          console.log('表单验证不通过');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

Im obigen Code verwenden wir die el-form-Komponente, um zwei el-form-item-Komponenten zu umschließen, wobei el-input Element ist – Von der Benutzeroberfläche bereitgestellte Eingabefeldkomponente. Durch die bidirektionale Bindung der V-Modell-Anweisung und der Formulardaten wird die synchrone Aktualisierung des Eingabefelds und der Formulardaten realisiert.

In der Datenoption definieren wir die Daten und Validierungsregeln des Formulars. Validierungsregeln werden über das Rules-Attribut an die el-form-Komponente übergeben und geben die Validierungsregeln für jedes Feld an. Im obigen Beispiel haben wir erforderliche Regeln und Längenregeln für die Felder Benutzername und Passwort definiert.

In der Methode „submitForm“ rufen wir die Methode „this.$refs.form.validate“ zur Formularüberprüfung auf. Diese Methode gibt einen booleschen Wert zurück, der angibt, ob die Formularvalidierung erfolgreich ist. Wenn die Überprüfung erfolgreich ist, können wir die Formulardaten übermitteln; wenn die Überprüfung fehlschlägt, können wir die Übermittlung des Formulars verhindern.

In der Methode „resetForm“ verwenden wir die Methode „$refs.form.resetFields“, um die Formulardaten zurückzusetzen.

Das Obige ist die grundlegende Verwendung der Verwendung von Element-UI zur Formularvalidierung.

3. Benutzerdefinierte Verifizierungsregeln
Zusätzlich zur Verwendung der von Element-UI bereitgestellten Verifizierungsregeln können wir auch Verifizierungsregeln anpassen. Das Folgende ist ein Beispiel für eine benutzerdefinierte Regel zur Überprüfung einer Mobiltelefonnummer:

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        phone: ''
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: this.validatePhone, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    validatePhone(rule, value, callback) {
      const reg = /^1[3|4|5|7|8][0-9]d{8}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error('手机号码格式不正确'));
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，可以提交表单
          console.log('表单验证通过');
        } else {
          // 表单验证不通过
          console.log('表单验证不通过');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

Im obigen Code geben wir die Überprüfungsmethode „validatePhone“ mithilfe des Validator-Attributs an, indem wir eine benutzerdefinierte Überprüfungsregel hinzufügen. In der Methode „validatePhone“ verwenden wir reguläre Ausdrücke, um zu bestimmen, ob die Mobiltelefonnummer die Anforderungen erfüllt. Wenn die Überprüfung fehlschlägt, rufen wir callback(new Error('Mobiltelefonnummernformat ist falsch ')).

Anhand der obigen Codebeispiele können wir sehen, dass Vue und Element-UI einen vollständigen Mechanismus zur Formularüberprüfung bereitstellen, der die meisten Überprüfungsanforderungen erfüllen kann. Die Verwendung von Vue und Element-UI zur Datenüberprüfung und Formularvalidierung kann unsere Entwicklungsarbeit effizienter und einfacher machen. Ich hoffe, dieser Artikel kann Ihnen helfen, vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue und Element-UI zur Datenüberprüfung und Formularvalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!