feat(useForm): Form state management and rule validation

Clear and concise description of the problem

I want to develop a useForm function to simplify form manipulation

Seek everyone’s opinion

Suggested solution

The current concept of the useForm function

Code

<script lang="js" setup>
const { form, error, reset, onSubmit } = useForm({
  // Initial form value
  form: () => ({
    age: '',
  }),
  // Verification rules
  rule: () => ({
    age: [
      /* required */ val => !!val || t('required'), // i18n support
      /* number */ val => !Number.isNaN(val) || 'Expected number',
      /* length */ val => val.length < 3 || 'Length needs to be less than 3',
    ],
  }),
})

function mySubmit() { /** Code */ }
</script>
<template>
  <h3>Please enter your age</h3>

  <form @submit.prevent="onSubmit(mySubmit)">
    <label>
      <input v-model="form.age" type="text">
      <p>{{ error.age }}</p>
    </label>

    <button type="submit">
      Submit
    </button>

    <button @click="reset">
      reset
    </button>
  </form>
</template>

TODO

• args
  • A function that returns the initial value of the form
  • A function that returns the validation rules
• return
  • func
    • Manually trigger form validation
    • reset form error
      • Support clearing specified fields
    • Submit (automatically verify rules before submitting)
    • reset form data (restore default)
  • reactive
    • form object
    • error message object
    • whether the value is modified

Alternative

No response

Additional context

Mind Mapping:

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

[LittleSound]

Hi @userquin 👋. I’ve implemented the ability to use Yup for rules in SlimeForm, maybe you can try it~

This draft is the predecessor of SlimeForm and now I am continuing development in SlimeForm.

[userquin]

@LittleSound have you check yup?

I didn’t know yup before, what do you want to say?

I mean, using it for the rules, for example vee-validate v4 is using it, maybe for this is out of scope