Cara menggunakan vue dan Element-plus untuk melaksanakan pengesahan dinamik dan gesaan borang

Cara menggunakan Vue dan Element Plus untuk melaksanakan pengesahan dinamik dan gesaan borang

Pengenalan:
Borang ialah salah satu kaedah interaksi biasa dalam halaman web, dan pengesahan dan gesaan borang adalah kunci untuk memastikan kesahihan data dan pengalaman pengguna . Vue ialah rangka kerja JavaScript yang popular, dan Element Plus ialah pustaka komponen UI Vue. Gabungan mereka boleh memudahkan pengesahan dan gesaan borang. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element Plus untuk melaksanakan pengesahan dinamik dan gesaan borang serta memberikan contoh kod yang sepadan.

1. Pasang Vue dan Element Plus
Sebelum kita mula, kita perlu memasang Vue dan Element Plus terlebih dahulu. Jika anda belum memasangnya lagi, anda boleh mengikuti langkah di bawah untuk berbuat demikian.

1. Pasang Vue
   Anda boleh menggunakan npm atau benang untuk memasang Vue. Buka terminal dan laksanakan arahan berikut:

   npm install vue

   Salin selepas log masuk

   atau

   yarn add vue

   Salin selepas log masuk

2. Pasang Element Plus
   Juga gunakan npm atau yarn untuk memasang Element Plus. Jalankan arahan berikut:

   npm install element-plus

   Salin selepas log masuk

   atau

   yarn add element-plus

   Salin selepas log masuk

2. Cipta komponen borang
Dalam Vue, kami membina aplikasi dengan mencipta komponen. Berikut ialah contoh komponen borang menggunakan Element Plus:

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

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，提交表单处理
        } else {
          // 验证不通过
          return false;
        }
      });
    },
  },
}
</script>

Dalam kod ini, kami menggunakan el-form dan el-form-item yang disediakan oleh Element Plus Komponen untuk membina borang. Melalui arahan v-model dan objek data formData, pengikatan dua hala data borang boleh dicapai. Pada masa yang sama, kami menentukan objek rules untuk menentukan peraturan pengesahan untuk item borang. el-form和el-form-item组件来构建表单。通过v-model指令和formData数据对象，可以实现对表单数据的双向绑定。同时，我们定义了rules对象来指定表单项的验证规则。

三、表单验证和提示
在上述代码中，我们使用了Vue的表单验证机制来实现表单的动态验证和提示。在点击提交按钮时，通过调用this.$refs.form.validate方法进行表单验证。如果验证通过，可以执行表单提交的逻辑；如果验证不通过，可以给用户相应的提示。

在验证的规则中，我们可以指定验证的方式（例如：blur表示失去焦点时验证）、错误提示信息、以及其他验证选项。当用户输入表单时，验证规则会被实时触发，如果不满足规则要求，则会出现相应的错误提示。

四、使用其他验证方式
除了上述示例中使用的blur方式之外，我们还可以通过其他方式来进行表单验证。下面是一些常用的验证方式：

• change：输入内容改变时验证。
• submit：表单提交时验证。
• input：实时验证，每次输入内容时都会触发验证。

在验证规则的trigger

Dalam kod di atas, kami menggunakan mekanisme pengesahan borang Vue untuk melaksanakan pengesahan dinamik dan gesaan borang. Apabila butang hantar diklik, pengesahan borang dilakukan dengan memanggil kaedah this.$refs.form.validate. Jika pengesahan lulus, logik penyerahan borang boleh dilaksanakan jika pengesahan gagal, pengguna boleh diberikan gesaan yang sepadan.

Atas ialah kandungan terperinci Cara menggunakan vue dan Element-plus untuk melaksanakan pengesahan dinamik dan gesaan borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!