Bagaimana untuk melaksanakan pengesahan dan pemprosesan ungkapan biasa dalam Vue?

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan ciri dan komponen yang kaya untuk membangunkan aplikasi web moden. Antaranya, ungkapan biasa ialah alat yang sangat penting yang boleh digunakan untuk mengesahkan dan memproses input borang, padanan rentetan, dsb. Dalam Vue, kami boleh menggunakan ungkapan biasa untuk mengesahkan input pengguna bagi memastikan ketepatan dan keselamatan data. Artikel ini akan memperkenalkan cara melaksanakan pengesahan dan pemprosesan ungkapan biasa dalam Vue.

1. Gunakan ungkapan biasa dalam templat Vue

Untuk pengesahan borang mudah, kami boleh menggunakan ungkapan biasa terus dalam templat Vue untuk mengesahkan input pengguna. Sebagai contoh, jika kami ingin mengesahkan sama ada alamat e-mel yang dimasukkan oleh pengguna memenuhi keperluan format, kami boleh menggunakan kod berikut:

<template>
  <div>
    <input type="email" v-model="email">
    <div v-if="!isValidEmail">{{errorMessage}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
    };
  },
  computed: {
    isValidEmail() {
      const emailRegex = /^([a-zA-Z0-9]+[_-]?)*[a-zA-Z0-9]+@[a-zA-Z0-9]+(.[a-zA-Z0-9]+)+$/;
      return emailRegex.test(this.email);
    },
    errorMessage() {
      return '请输入有效的邮箱地址';
    },
  },
};
</script>

Dalam kod di atas, kami menggunakan ungkapan biasa e-mel untuk menentukan sama ada alamat e-mel yang dimasukkan oleh pengguna adalah sah. Ungkapan biasa ini boleh memadankan rentetan yang memenuhi spesifikasi alamat e-mel, termasuk nama pengguna, nama domain, dsb.

Jika rentetan yang dimasukkan oleh pengguna tidak memenuhi keperluan, sifat yang dikira isValidEmail akan mengembalikan palsu dan mesej ralat akan dipaparkan pada halaman. Kami juga boleh menetapkan mesej ralat kepada atribut yang dikira supaya mesej ralat boleh dipaparkan secara dinamik pada halaman.

Dalam penggunaan sebenar, kami boleh menyesuaikan ungkapan biasa mengikut keperluan khusus untuk melengkapkan pelbagai fungsi pengesahan borang.

2. Menggunakan ungkapan biasa dalam kaedah Vue

Selain menggunakan ungkapan biasa dalam templat, kami juga boleh menggunakan ungkapan biasa dalam kaedah Vue untuk mencapai pemprosesan logik yang lebih kompleks. Sebagai contoh, kita boleh menggunakan ungkapan biasa untuk menapis, menggantikan atau memisahkan rentetan.

Dalam kod berikut, kami mentakrifkan kaedah penapisText, yang akan menapis semua nombor dalam rentetan mengikut peraturan padanan ungkapan biasa, hanya mengekalkan huruf dan aksara khas:

<template>
  <div>
    <textarea v-model="text"></textarea>
    <div>{{filterText(text)}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    filterText(input) {
      const regex = /d+/g;
      return input.replace(regex, '');
    },
  },
};
</script>

Dalam kod di atas, kami menggunakan /d+ /g ungkapan biasa untuk memadankan semua nombor dalam rentetan, dan kemudian menggunakan kaedah ganti untuk menggantikan nombor yang dipadankan dengan rentetan kosong. Hasil akhirnya ialah hanya huruf dan aksara khas dalam teks input dikekalkan dan semua nombor ditapis keluar.

Selain menapis dan menggantikan, ungkapan biasa mempunyai banyak kaedah dan aplikasi lain, seperti belah, ujian, dsb. Dalam penggunaan sebenar, kita boleh menggunakan pelbagai kaedah ungkapan biasa secara fleksibel untuk melaksanakan pelbagai logik pemprosesan data.

3. Kelas alat ungkapan biasa pembungkusan

Dalam pembangunan sebenar, kami mungkin sering menggunakan beberapa ungkapan biasa biasa, seperti e-mel, nombor telefon mudah alih, nombor ID, dsb. Untuk kemudahan penggunaan, kami boleh merangkum kelas alat ekspresi biasa untuk kegunaan mudah sepanjang aplikasi.

Berikut ialah contoh kelas alat ungkapan biasa yang mudah, yang mentakrifkan beberapa ungkapan biasa yang biasa digunakan, seperti e-mel, telefon, kad id, dll.:

export const REGEXP = {
  EMAIL: /^([a-zA-Z0-9]+[_-]?)*[a-zA-Z0-9]+@[a-zA-Z0-9]+(.[a-zA-Z0-9]+)+$/,
  PHONE: /^1[3456789]d{9}$/,
  IDCARD: /(^d{15}$)|(^d{17}([0-9]|X)$)/,
  // ...
};

export function testRegexp(regexp, value) {
  if (typeof value !== 'string') {
    return false;
  }
  return regexp.test(value);
}

Dalam contoh di atas, kami menggunakan pemalar untuk mentakrifkan setiap A biasa ekspresi, dan kemudian merangkum kaedah testRegexp untuk memadankan rentetan dengan mudah.

Dalam penggunaan sebenar, kami boleh melakukan pengesahan borang dan operasi pemprosesan data dengan mudah dengan mengimport kelas alat ungkapan biasa di atas. Contohnya, jika kami ingin menentukan sama ada nombor telefon mudah alih yang dimasukkan oleh pengguna adalah sah, kami boleh mengesahkannya dengan kod berikut:

import { REGEXP, testRegexp } from './regexp';

const phone = '18888888888';
const isValid = testRegexp(REGEXP.PHONE, phone);

if (isValid) {
  console.log('手机号码合法');
} else {
  console.log('手机号码不合法');
}

Dalam kod di atas, kami menggunakan ungkapan biasa REGEXP.PHONE untuk memadankan telefon bimbit nombor yang dimasukkan oleh pengguna, dan Gunakan kaedah testRegexp untuk melaksanakan operasi penghakiman. Akhirnya, mengikut keputusan penghakiman, maklumat segera yang sepadan adalah output.

Ringkasnya, adalah sangat mudah dan fleksibel untuk menggunakan ungkapan biasa dalam Vue untuk mengesahkan dan memproses input pengguna. Kami boleh melengkapkan pelbagai logik pemprosesan data dengan terus menggunakan ungkapan biasa dalam templat dan menggunakan ungkapan biasa dalam kaedah, atau kami boleh merangkum kelas alat ungkapan biasa untuk memudahkan pengesahan borang dan operasi pemprosesan data untuk keseluruhan aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pengesahan dan pemprosesan ungkapan biasa dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!