Cara menggunakan Vue dan Element-UI untuk pengesahan data dan pengesahan borang

Cara menggunakan Vue dan Element-UI untuk pengesahan data dan pengesahan borang

Pengenalan:
Dalam proses pembangunan aplikasi web, pengesahan borang adalah bahagian yang sangat penting. Ia memastikan data yang dimasukkan pengguna mematuhi format dan keperluan yang diharapkan, dengan itu meningkatkan kestabilan aplikasi dan ketepatan data. Vue.js ialah rangka kerja JavaScript yang sangat popular, dan Element-UI ialah satu set perpustakaan komponen UI berdasarkan Vue.js, yang menyediakan set kaya dengan komponen borang dan kaedah pengesahan untuk memudahkan pembangun melaksanakan pengesahan borang. Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk pengesahan data dan pengesahan borang, serta melampirkan contoh kod yang sepadan.

1. Pasang Elemen-UI dan konfigurasikan projek Vue
Pertama, kita perlu memasang Elemen-UI dan mengkonfigurasi projek Vue. Element-UI boleh dipasang melalui arahan berikut:

npm install element-ui --save

Kemudian, perkenalkan Element-UI dalam fail main.js:

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

Vue.use(ElementUI);

2. Penggunaan asas pengesahan borang
Element-UI menyediakan satu siri kaedah dan arahan pengesahan. Pengesahan borang boleh dilakukan dengan mudah. Berikut ialah contoh mudah yang menunjukkan cara menggunakan Element-UI untuk pengesahan borang asas:

<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>

Dalam kod di atas, kami menggunakan komponen el-form untuk membalut dua komponen el-form-item, dengan el-input ialah Elemen - Komponen kotak input disediakan oleh UI. Melalui pengikatan dua hala bagi arahan model v dan data borang, kemas kini segerak kotak input dan data borang direalisasikan.

Dalam pilihan data, kami mentakrifkan data dan peraturan pengesahan borang. Peraturan pengesahan dihantar kepada komponen el-form melalui atribut peraturan, menyatakan peraturan pengesahan untuk setiap medan. Dalam contoh di atas, kami menentukan peraturan dan peraturan panjang yang diperlukan untuk medan nama pengguna dan kata laluan.

Dalam kaedah submitForm, kami memanggil kaedah this.$refs.form.validate untuk pengesahan borang. Kaedah ini akan mengembalikan nilai Boolean yang menunjukkan sama ada pengesahan borang lulus. Jika pengesahan lulus, kami boleh menyerahkan data borang jika pengesahan gagal, kami boleh menghalang borang daripada diserahkan.

Dalam kaedah resetForm, kami menggunakan kaedah ini.$refs.form.resetFields untuk menetapkan semula data borang.

Di atas ialah penggunaan asas menggunakan Elemen-UI untuk pengesahan borang.

3. Peraturan pengesahan tersuai
Selain menggunakan peraturan pengesahan yang disediakan oleh Element-UI, kami juga boleh menyesuaikan peraturan pengesahan. Berikut ialah contoh peraturan pengesahan nombor telefon mudah alih tersuai:

<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>

Dalam kod di atas, kami menyatakan kaedah pengesahan mengesahkanTelefon menggunakan atribut pengesah dengan menambahkan peraturan pengesahan tersuai. Dalam kaedah validatePhone, kami menggunakan ungkapan biasa untuk menentukan sama ada nombor telefon bimbit memenuhi keperluan Jika pengesahan lulus, kami memanggil panggilan balik(); jika pengesahan gagal, kami memanggil panggilan balik(Ralat baharu('Format nombor telefon bimbit tidak betul ')).

Melalui contoh kod di atas, kita dapat melihat bahawa Vue dan Element-UI menyediakan mekanisme pengesahan borang lengkap yang boleh memenuhi kebanyakan keperluan pengesahan. Menggunakan Vue dan Element-UI untuk pengesahan data dan pengesahan borang boleh menjadikan pembangunan kami berfungsi lebih cekap dan mudah. Saya harap artikel ini dapat membantu anda, terima kasih kerana membaca!

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk pengesahan data dan pengesahan borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!