Cara menggunakan pemprosesan borang Vue untuk melaksanakan pengesahan bersyarat bagi medan borang

Cara menggunakan pemprosesan borang Vue untuk melaksanakan pengesahan bersyarat bagi medan borang

Dalam pembangunan web, borang adalah salah satu cara penting untuk pengguna berinteraksi dengan aplikasi. Pengesahan input borang memainkan peranan penting dalam memastikan ketepatan dan kesempurnaan data. Vue ialah rangka kerja JavaScript popular yang menyediakan cara yang mudah tetapi berkuasa untuk mengendalikan pengesahan borang bahagian hadapan. Artikel ini akan memperkenalkan cara menggunakan pemprosesan borang Vue untuk melaksanakan pengesahan bersyarat bagi medan borang.

Vue menyediakan satu siri arahan dan ungkapan untuk melaksanakan pengesahan bersyarat bagi medan borang. Kita boleh menggunakan ciri ini untuk mentakrifkan pelbagai peraturan pengesahan secara fleksibel. Pertama, kita perlu mengikat objek data ke medan borang Objek ini mengandungi medan yang ingin kita sahkan dan peraturan pengesahan. Sebagai contoh, kami mempunyai borang pendaftaran yang mengandungi medan nama, e-mel dan kata laluan Kami boleh mentakrifkan objek data berikut:

data() {
  return {
    form: {
      name: '',
      email: '',
      password: ''
    },
    rules: {
      name: [
        { required: true, message: '姓名不能为空', trigger: 'blur' },
        { min: 2, max: 10, message: '姓名长度必须在2到10个字符之间', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '邮箱不能为空', trigger: 'blur' },
        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度必须在6到20个字符之间', trigger: 'blur' }
      ]
    }
  }
}

Dalam kod di atas, objek borang mengandungi medan yang perlu disahkan dan objek peraturan. mentakrifkan peraturan pengesahan untuk setiap medan. Sebagai contoh, medan nama mesti memenuhi syarat tidak kosong dan panjang antara 2 hingga 10 aksara, medan e-mel mesti memenuhi syarat tidak kosong dan dalam format e-mel yang sah dan medan kata laluan mesti memenuhi syarat tidak kosong dan panjang antara 6 dan 20 aksara.

Seterusnya, kita perlu mengikat peraturan pengesahan dan gesaan ralat pada medan borang. Dalam kod HTML, kita boleh menggunakan arahan v-model untuk dua hala mengikat medan borang dan objek data, kita juga boleh menggunakan arahan v-sahkan untuk mengikat medan borang kepada peraturan pengesahan, dan menggunakan arahan v-show untuk melaporkan ralat apabila ralat berlaku. Contohnya:

<el-form-item label="姓名" prop="name" :rules="rules.name">
  <el-input v-model="form.name" v-validate="'blur'"></el-input>
  <span v-show="errors.has('form.name')">{{ errors.first('form.name') }}</span>
</el-form-item>

<el-form-item label="邮箱" prop="email" :rules="rules.email">
  <el-input v-model="form.email" v-validate="'blur'"></el-input>
  <span v-show="errors.has('form.email')">{{ errors.first('form.email') }}</span>
</el-form-item>

<el-form-item label="密码" prop="password" :rules="rules.password">
  <el-input type="password" v-model="form.password" v-validate="'blur'"></el-input>
  <span v-show="errors.has('form.password')">{{ errors.first('form.password') }}</span>
</el-form-item>

Dalam kod di atas, kami mengaitkan peraturan pengesahan dengan item borang melalui atribut prop, mengikat item borang dengan peraturan pengesahan melalui arahan v-validate dan memaparkan gesaan ralat apabila ralat pengesahan berlaku melalui arahan v-tunjuk. Pada masa yang sama, kami menggunakan kaedah yang disediakan oleh objek ralat untuk menentukan sama ada item borang mempunyai ralat pengesahan dan mendapatkan maklumat ralat.

Akhir sekali, kami perlu mengesahkan penyerahan borang. Kita boleh menggunakan kaedah pengesahan untuk mengesahkan keseluruhan borang, atau kita boleh menggunakan kaedah validateField untuk mengesahkan satu medan. Selepas pengesahan, anda boleh melakukan operasi yang sepadan berdasarkan hasil pengesahan. Sebagai contoh, kami boleh menjalankan pengesahan keseluruhan borang terlebih dahulu apabila menyerahkannya, dan kemudian menentukan sama ada membenarkan borang diserahkan berdasarkan kesahihan keputusan pengesahan:

methods: {
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 验证成功，提交表单逻辑
        // ...
      } else {
        // 验证失败，提示用户
        // ...
      }
    })
  }
}

Dalam kod di atas, kami memanggil kaedah pengesahan untuk sahkan keseluruhan borang, yang menerima fungsi panggil balik sebagai parameter. Parameter yang sah bagi fungsi panggil balik menunjukkan sama ada keputusan pengesahan adalah benar atau palsu. Jika sah adalah benar, ini bermakna keseluruhan pengesahan borang lulus jika tidak, ini bermakna pengesahan borang gagal.

Melalui langkah di atas, kami boleh menggunakan pemprosesan borang Vue untuk melaksanakan pengesahan bersyarat bagi medan borang. Dengan mentakrifkan peraturan pengesahan dan mengikat peraturan pengesahan ke medan bentuk, kami boleh melaksanakan pengesahan bersyarat borang dengan mudah dan memberikan pengguna gesaan ralat yang sepadan apabila ralat pengesahan berlaku. Pada masa yang sama, kami juga boleh memutuskan sama ada untuk membenarkan penyerahan borang berdasarkan keputusan pengesahan, seterusnya memastikan ketepatan dan kesempurnaan data. Jika anda sedang membangun dalam Vue dan perlu melaksanakan pengesahan borang, anda juga boleh mencuba kaedah yang mudah dan berkuasa ini.

Atas ialah kandungan terperinci Cara menggunakan pemprosesan borang Vue untuk melaksanakan pengesahan bersyarat bagi medan borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!