Vue Form Validation是一個強大的表單驗證工具。它提供了多種驗證方式,確保用戶輸入的數據符合預期的規則和格式。
Vue Form Validation主要使用Vue的指令來實現驗證功能,比如v-model、v-bind、v-on等。以下是一個例子:
<template>
<form v-on:submit.prevent="submitForm">
<label for="username">用戶名:</label>
<input type="text" id="username" v-model="username" required>
<label for="password">密碼:</label>
<input type="password" id="password" v-model="password" required>
<button type="submit">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
submitForm() {
// 提交表單
}
}
}
</script>
在上面的代碼中,我們使用了v-model指令來綁定表單元素的值。required屬性表示輸入框不能為空。但這并不足以確保輸入框中的值符合我們的要求,因此我們需要添加更多的驗證。
Vue Form Validation提供了很多驗證規則,例如:
import { required, email, minLength } from '@vuelidate/validators'
export default {
validations: {
username: {
required,
minLength: minLength(6)
},
password: {
required,
minLength: minLength(8)
},
email: {
required,
email
}
}
}
在上面的代碼中,我們定義了validation對象來指定要驗證的字段和規則。required、email和minLength是內置的驗證規則,但你也可以自定義自己的驗證規則。
上一篇html小數點代碼
下一篇vue form 動態