vee validate
v4.14.7
รูปแบบ Vue ที่ไม่เจ็บปวด
# Install with yarn
yarn add vee-validate
# Install with npm
npm install vee-validate --saveเวอร์ชัน V4 หลักรองรับ Vue 3.x เท่านั้นสำหรับ Vue เวอร์ชันก่อนหน้าตรวจสอบตารางต่อไปนี้
| เวอร์ชัน Vue | Vee-Validate เวอร์ชัน | ลิงค์เอกสาร |
|---|---|---|
2.x | 2.x หรือ 3.x | v2 หรือ v3 |
3.x | 4.x | V4 |
Vee-Validate เสนอสองรูปแบบเพื่อรวมการตรวจสอบรูปแบบเข้ากับแอพ Vue.js ของคุณ
วิธีที่เร็วที่สุดในการสร้างรูปแบบและจัดการการตรวจสอบความถูกต้องพฤติกรรมและค่าคือกับองค์ประกอบ API
สร้างแบบฟอร์มของคุณด้วย useForm จากนั้นใช้ defineField เพื่อสร้างโมเดลฟิลด์และอุปกรณ์ประกอบฉาก/แอตทริบิวต์และ handleSubmit เพื่อใช้ค่าและส่งไปยัง API
< script setup >
import { useForm } from ' vee-validate ' ;
// Validation, or use `yup` or `zod`
function required ( value ) {
return value ? true : ' This field is required ' ;
}
// Create the form
const { defineField , handleSubmit , errors } = useForm ({
validationSchema : {
field : required,
},
});
// Define fields
const [ field , fieldProps ] = defineField ( ' field ' );
// Submit handler
const onSubmit = handleSubmit ( values => {
// Submit to API
console . log (values);
});
</ script >
< template >
< form @ submit = " onSubmit " >
< input v-model = " field " v-bind = " fieldProps " />
< span >{{ errors . field }}</ span >
< button >Submit</ button >
</ form >
</ template >คุณสามารถทำอะไรได้มากกว่านี้สำหรับข้อมูลเพิ่มเติมตรวจสอบเอกสารประกอบ API องค์ประกอบ
ส่วนประกอบที่มีลำดับสูงกว่ายังสามารถใช้ในการสร้างแบบฟอร์ม ลงทะเบียนส่วนประกอบ Field และ Form และสร้างตัวตรวจสอบ required อย่างง่าย:
< script setup >
import { Field , Form } from ' vee-validate ' ;
// Validation, or use `yup` or `zod`
function required ( value ) {
return value ? true : ' This field is required ' ;
}
// Submit handler
function onSubmit ( values ) {
// Submit to API
console . log (values);
}
</ script >
< template >
< Form v-slot = " { errors } " @ submit = " onSubmit " >
< Field name = " field " : rules = " required " />
< span >{{ errors . field }}</ span >
< button >Submit</ button >
</ Form >
</ template > ส่วนประกอบ Field แสดง input ของ text ประเภทโดยค่าเริ่มต้น แต่คุณสามารถควบคุมได้
อ่านเอกสารและการสาธิต
คุณยินดีที่จะมีส่วนร่วมในโครงการนี้ แต่ก่อนที่คุณจะทำโปรดตรวจสอบให้แน่ใจว่าคุณได้อ่านคู่มือการบริจาค
ที่นี่เราให้เกียรติผู้สนับสนุนและผู้สนับสนุนที่ผ่านมาซึ่งเป็นส่วนสำคัญในโครงการนี้
เปิดตัวภายใต้ MIT โดย @logaretm
