suchen

Heim >Web-Frontend >View.js >So handhaben Sie die Überprüfung und Übermittlung von Formulareingaben in Vue

So handhaben Sie die Überprüfung und Übermittlung von Formulareingaben in Vue

WBOY
WBOYOriginal
2023-10-15 08:48:181986Durchsuche

So handhaben Sie die Überprüfung und Übermittlung von Formulareingaben in Vue

Überprüfung und Übermittlung von Formulareingaben in Vue
In der Front-End-Entwicklung ist die Überprüfung und Übermittlung von Formulareingaben ein sehr wichtiger Link. Als beliebtes Frontend-Framework bietet Vue einige praktische Möglichkeiten für die Überprüfung und Übermittlung von Formulareingaben. In diesem Artikel wird erläutert, wie Formulareingaben in Vue überprüft und übermittelt werden, und es werden einige Codebeispiele aufgeführt.

Formulareingaben validieren
In Vue können wir den integrierten Validator verwenden, um Formulareingaben zu validieren. Vue stellt eine Methode namens „Validierungsanweisungen“ zur Verfügung, die direkt in Vorlagen verwendet werden kann.

Führen Sie zunächst die Bibliotheksdateien von Vue und Element UI im

-Tag von HTML ein (Element UI ist eine Reihe von Desktop-Komponentenbibliotheken basierend auf Vue.js): 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

Dann werden im

von HTML Definieren Sie ein einfaches Formular im Tag: 
<body>
  <div id="app">
    <el-form ref="form" :rules="rules" label-width="100px" style="max-width: 450px; margin: 50px auto;">
      <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-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form>
  </div>
  
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          form: {
            username: '',
            password: '',
          },
          rules: {
            username: [
              { required: true, message: '用户名不能为空', trigger: 'blur' },
              { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
            ],
            password: [
              { required: true, message: '密码不能为空', trigger: 'blur' },
              { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
            ],
          },
        };
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('表单校验通过，可以提交');
            } else {
              console.log('表单校验失败');
              return false;
            }
          });
        },
      },
    });
  </script>
</body>

Im obigen Code binden wir den Eingabewert des Formulars über die V-Model-Direktive und die Überprüfungsregeln des Formulars über das :rules-Attribut. Unter diesen gibt required: true erforderliche Felder an und min und max stellen die minimale und maximale Länge dar. required: true 表示必填项，min 和 max 代表最小和最大长度。

在 submitForm 方法中，我们调用了 $refs[formName].validate 方法进行表单校验。校验成功时，会弹出一个提示框。

提交表单
在Vue中，提交表单可以通过发送Ajax请求或调用后端API来实现。这里给出一个通过发送Ajax请求的示例代码：

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        form: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
          ],
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 表单校验通过，发送Ajax请求
            this.$http.post('/api/submit', this.form).then((response) => {
              console.log('提交成功');
            }).catch((error) => {
              console.log('提交失败');
            });
          } else {
            console.log('表单校验失败');
            return false;
          }
        });
      },
    },
  });
</script>

在上述代码中，我们使用 Vue 提供的 $http 对象发送 Ajax 请求，将表单数据提交给后端的 /api/submit

In der Methode submitForm rufen wir die Methode $refs[formName].validate zur Formularüberprüfung auf. Wenn die Überprüfung erfolgreich ist, wird ein Eingabeaufforderungsfeld angezeigt.


Ein Formular senden

In Vue kann das Senden eines Formulars durch das Senden einer Ajax-Anfrage oder den Aufruf einer Backend-API erfolgen. Hier ist ein Beispielcode zum Senden einer Ajax-Anfrage:

rrreee

Im obigen Code verwenden wir das von Vue bereitgestellte $http-Objekt, um die Ajax-Anfrage zu senden und die Formulardaten an den / api/submit Schnittstelle. 🎜🎜Zusammenfassung🎜Anhand der obigen Beispiele können wir sehen, dass es sehr einfach ist, die Prüfsummenübermittlung von Formulareingaben in Vue zu handhaben. Wir müssen lediglich die Verifizierungsregeln festlegen, die Verifizierungsmethode aufrufen und dann basierend auf den Verifizierungsergebnissen eine entsprechende Verarbeitung durchführen. Gleichzeitig können wir auch Formulardaten übermitteln, indem wir Ajax-Anfragen senden oder Back-End-APIs aufrufen. 🎜🎜Natürlich ist der obige Code nur ein einfaches Beispiel. Sie können ihn entsprechend Ihren tatsächlichen Anforderungen erweitern und ändern. Ich hoffe, dieser Artikel kann Ihnen bei der Überprüfung und Übermittlung von Formulareingaben in Vue helfen! 🎜

Das obige ist der detaillierte Inhalt vonSo handhaben Sie die Überprüfung und Übermittlung von Formulareingaben in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

ajax html 前端框架 接口 JS 对象 http ui
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So erreichen Sie Mehrsprachigkeit und Internationalisierung in VueNächster Artikel：So erreichen Sie Mehrsprachigkeit und Internationalisierung in Vue

In Verbindung stehende Artikel

Mehr sehen