Cara melaksanakan pengesahan borang dinamik melalui Vue

Dengan perkembangan pesat pembangunan bahagian hadapan, pengesahan borang telah menjadi kemahiran penting untuk pembangunan bahagian hadapan. Sebagai salah satu rangka kerja hadapan arus perdana semasa, Vue juga menyediakan penyelesaian yang sangat mudah dan cekap dalam pengesahan borang. Artikel ini akan memperkenalkan cara melaksanakan pengesahan borang dinamik melalui Vue daripada tiga aspek berikut.

1. Prinsip pengesahan borang dalam Vue

Prinsip pengesahan borang dalam Vue dilaksanakan terutamanya melalui model v dan atribut yang dikira. v-model digunakan untuk melaksanakan pengikatan dua hala borang, dan atribut yang dikira boleh menjana peraturan pengesahan secara dinamik berdasarkan data yang terikat pada kawalan borang oleh model-v. Apabila data kawalan borang berubah, sifat yang dikira juga akan dikira semula dan dikemas kini, dan peraturan pengesahan akan dijana semula dan berkuat kuasa.

2. Kaedah pengesahan borang dalam Vue

Vue menyediakan pelbagai kaedah untuk melaksanakan pengesahan borang, termasuk pengesah tersuai, pengesah terbina dalam dan pemalam pihak ketiga.

(1) Pengesah tersuai

Dengan mentakrifkan kaedah, kaedah perlu mengembalikan benar atau salah untuk menunjukkan sama ada pengesahan borang diluluskan, seperti yang ditunjukkan di bawah:

methods: {
  validateEmail(email) {
    // 正则表达式验证邮箱格式是否正确
    const reg = /^([a-zA-Z]|[0-9])(w|-)+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
    return reg.test(email);
  }
}

Ikat kaedah pada kawalan borang dan tambah v-show Arahan untuk melaksanakan pengesahan borang, seperti yang ditunjukkan di bawah:

<input v-model="email" />
<span v-show="!validateEmail(email)">邮箱格式不正确</span>

(2) Pengesah terbina dalam

Pengesah terbina dalam Vue termasuk diperlukan, e-mel, angka, dsb. Pengesah ini boleh digunakan terus pada kawalan borang, seperti yang ditunjukkan di bawah :

<input type="text" v-model="name" required />
<span v-show="$v.name.$error">姓名不能为空</span>

<input type="email" v-model="email" />
<span v-show="$v.email.$error">邮箱格式不正确</span>

<input type="number" v-model="age" />
<span v-show="$v.age.$error">年龄必须是数字</span>

(3) Pemalam pihak ketiga

Vue juga mempunyai berbilang pemalam pihak ketiga untuk pengesahan borang, seperti pemalam VeeValidate. VeeValidate boleh sangat memudahkan kerumitan pengesahan borang, dan juga boleh menyokong fungsi lanjutan seperti i18n dan mesej tersuai.

3. Contoh pengesahan borang dalam Vue

Berikut ialah contoh pelaksanaan pengesahan borang pendaftaran pengguna Contoh ini menggunakan pemalam VeeValidate untuk melaksanakan pengesahan nama, e-mel dan kata laluan:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label>姓名:</label>
      <input type="text" v-model="name" v-validate="'required'" />
      <span v-show="errors.has('name')">{{ errors.first('name') }}</span>
       
      <label>邮箱:</label>
      <input type="text" v-model="email" v-validate="'required|email'" />
      <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
       
      <label>密码:</label>
      <input type="password" v-model="password" v-validate="'required'" />
      <span v-show="errors.has('password')">{{ errors.first('password') }}</span>
      
      <button type="submit" :disabled="errors.any()">提交</button>
    </form>
  </div>
</template>

<script>
import { required, email } from 'vee-validate/dist/rules';
import { extend, ValidationProvider, ValidationObserver, setInteractionMode } from 'vee-validate';

setInteractionMode('eager');

extend('required', required);
extend('email', email);

export default {
  components: {
    ValidationProvider,
    ValidationObserver,
  },

  data() {
    return {
      name: '',
      email: '',
      password: '',
    };
  },

  methods: {
    submitForm() {
      alert('表单验证通过，开始提交数据');
    },
  },
};
</script>

Dalam contoh di atas, kami memperkenalkan. Pemalam VeeValidate, dan melanjutkan peraturan pengesahan yang diperlukan dan e-mel melalui kaedah lanjutan. Dalam templat, kami menetapkan arahan pengesahan v untuk kawalan nama, e-mel dan kata laluan masing-masing, dan menambah peraturan pengesahan yang sepadan. Kami juga menetapkan formula penghakiman untuk butang hantar untuk menentukan sama ada terdapat ralat dalam borang Jika terdapat ralat, butang hantar akan dilumpuhkan.

Melalui contoh di atas, kita dapat melihat bahawa pemalam VeeValidate boleh memudahkan kerumitan pengesahan borang dengan sangat baik, dan pada masa yang sama menyediakan peraturan pengesahan yang kaya dan fungsi lanjutan, menjadikan pengesahan borang lebih mudah dan lebih pantas.

Ringkasnya, Vue menyediakan pelbagai cara untuk melaksanakan pengesahan borang, dan pembangun boleh memilih kaedah pengesahan yang sesuai dengan mereka mengikut keperluan khusus. Tidak kira kaedah yang digunakan, pengesahan bentuk yang baik boleh meningkatkan pengalaman pengguna dan keselamatan data, dan meningkatkan kestabilan dan kebolehpercayaan aplikasi web.

Atas ialah kandungan terperinci Cara melaksanakan pengesahan borang dinamik melalui Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!