Rumah > Artikel > hujung hadapan web > Cara mengendalikan pengesahan dan penyerahan input borang dalam Vue
Cara mengendalikan pengesahan dan penyerahan input borang dalam Vue
- WBOYasal
- 2023-10-15 08:48:181934semak imbas
Borang pengesahan dan penyerahan input dalam Vue
Dalam pembangunan bahagian hadapan, pengesahan dan penyerahan input borang adalah pautan yang sangat penting. Sebagai rangka kerja bahagian hadapan yang popular, Vue menyediakan beberapa cara mudah untuk mengendalikan pengesahan dan penyerahan input borang. Artikel ini akan memperkenalkan cara untuk mengesahkan dan menyerahkan input borang dalam Vue, dan memberikan beberapa contoh kod.
Sahkan input borang
Dalam Vue, kami boleh menggunakan pengesah terbina dalam untuk mengesahkan input borang. Vue menyediakan kaedah yang dipanggil "arahan pengesahan", yang boleh digunakan secara langsung dalam templat.
Pertama, perkenalkan fail perpustakaan Vue dan UI Elemen dalam teg
HTML (UI Elemen ialah satu set perpustakaan komponen desktop berdasarkan Vue.js): rreee # 🎜🎜#Kemudian, tentukan bentuk mudah dalam teg HTML:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script>Dalam kod di atas, kami mengikat nilai input borang melalui arahan model-v, melalui : peraturan Atribut mengikat peraturan pengesahan borang. Antaranya,
diperlukan: benar menunjukkan medan yang diperlukan dan min dan maks mewakili panjang minimum dan maksimum. required: true 表示必填项，min 和 max 代表最小和最大长度。
在 submitForm 方法中，我们调用了 $refs[formName].validate 方法进行表单校验。校验成功时，会弹出一个提示框。
提交表单
在Vue中，提交表单可以通过发送Ajax请求或调用后端API来实现。这里给出一个通过发送Ajax请求的示例代码：
<body>
<div id="app">
<el-form ref="form" :rules="rules" label-width="100px" style="max-width: 450px; margin: 50px auto;">
<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-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
form: {
username: '',
password: '',
},
rules: {
username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('表单校验通过，可以提交');
} else {
console.log('表单校验失败');
return false;
}
});
},
},
});
</script>
</body>在上述代码中，我们使用 Vue 提供的 $http 对象发送 Ajax 请求，将表单数据提交给后端的 /api/submitDalam kaedah submitForm, kami memanggil kaedah $refs[formName].validate untuk pengesahan borang. Apabila pengesahan berjaya, kotak gesaan akan muncul.
Serahkan borang
Dalam Vue, penyerahan borang boleh dicapai dengan menghantar permintaan Ajax atau menghubungi API bahagian belakang. Berikut ialah contoh kod untuk menghantar permintaan Ajax:
<script>
new Vue({
el: '#app',
data() {
return {
form: {
username: '',
password: '',
},
rules: {
username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' },
{ min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' },
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 表单校验通过，发送Ajax请求
this.$http.post('/api/submit', this.form).then((response) => {
console.log('提交成功');
}).catch((error) => {
console.log('提交失败');
});
} else {
console.log('表单校验失败');
return false;
}
});
},
},
});
</script>Dalam kod di atas, kami menggunakan objek $http yang disediakan oleh Vue untuk menghantar permintaan Ajax dan menyerahkan borang data ke antara muka /api/submit bahagian belakang.
Atas ialah kandungan terperinci Cara mengendalikan pengesahan dan penyerahan input borang dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!