Problem Statement
Show a simple pattern for hand-rolled validation using computed properties.
Explanation
Keep raw form state in refs/reactive, then compute an errors map by deriving rules (required, length, regex). Disable submit if errors exist and show messages next to inputs.
Code Solution
SolutionRead Only
const form = reactive({ email: '', pwd: '' })
const errors = computed(() => ({
email: /.+@.+\..+/.test(form.email) ? '' : 'Enter a valid email',
pwd: form.pwd.length >= 8 ? '' : 'Min 8 chars'
}))
const canSubmit = computed(() => !errors.value.email && !errors.value.pwd)