通过vee验证发送表单

提问

我有以下问题: 错误消息总是显示,当我点击“提交”时,什么都不会发生。我使用vee验证和组合API脚本设置。项目由Vite建造。有代码: 应用程序。vue(母公司) 和BaseInput(child): bases当选的代码几乎相同。我只是想防止表单提交无效的数据,并在模糊事件上显示错误。

<script setup>
const cars = [
...
];
const required = (value) => {
  const requiredMessage = "This field is required!";
  if (value === undefined || value === null) return requiredMessage;
  if (!String(value).length) return requiredMessage;
  return true;
};
const minLength = (number, value) => {
   if (String(value).length < number) return 'Please type at least ' + number + ' characters'
  return true;
};
const validationSchema = {
  name: (value) => {
    const req = required(value)
    if (req !== true) return req
    const min = minLength(3, value)
    if (min !== true) return min
    return true
  },
  car: (value) => {
    const req = required(value)
    if (req !== true) return req
    return true
  },
};
const { value: name } = useField("name");
const { value: car } = useField("car");
const { handleSubmit, errors } = useForm({
  validationSchema,
});
const submit = handleSubmit ( values => {
  console.log('submit', values)
})
</script>
<template>
  <form @submit="submit">
    <BaseInput
      v-model="name"
      type="text"
      :error="errors.name"
    ></BaseInput>
    <BaseSelect
      v-model="car"
      :cars="cars"
      :error="errors.car"
    ></BaseSelect>
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: [String, Number], default: "" },
  label: String,
  type: { type: String, default: "text" },
  error: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["update:modelValue"]);
function updateValue(value) {
  emit("update:modelValue", value);
}
</script>
<template>
  <div>
    <label for="name">{{ label }}</label>
    <input
      name="name"
      v-bind="$attrs"
      :type="props.type"
      :value="props.modelValue"
      v-on:input="updateValue($event.target.value)"
    />
    <p>{{ error }}</p>
  </div>
</template>

▼版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说cuoshuo.com——程序员的报错记录

部分内容根据CC版权协议转载,如果您希望取消转载请发送邮件到cuoshuo8@163.com

辽ICP备19011660号-5