uniapp+vue3表单校验

以下是使用Vue 3和uni-app实现表单校验的示例代码：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label for="name">姓名：</label>
      <input type="text" id="name" v-model="formData.name" />
      <p v-if="errors.name" class="error">{{ errors.name }}</p>

      <label for="email">邮箱：</label>
      <input type="email" id="email" v-model="formData.email" />
      <p v-if="errors.email" class="error">{{ errors.email }}</p>

      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const formData = ref({
      name: '',
      email: '',
    });

    const errors = ref({});

    const validateForm = () => {
      errors.value = {};

      if (!formData.value.name) {
        errors.value.name = '请输入姓名';
      }

      if (!formData.value.email) {
        errors.value.email = '请输入邮箱';
      } else if (!isValidEmail(formData.value.email)) {
        errors.value.email = '请输入有效的邮箱地址';
      }

      return Object.keys(errors.value).length === 0;
    };

    const submitForm = () => {
      if (validateForm()) {
        // 表单校验通过，提交表单
        console.log('表单校验通过，提交表单');
      }
    };

    const isValidEmail = (email) => {
      // 简单的邮箱格式校验
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(email);
    };

    return {
      formData,
      errors,
      submitForm,
    };
  },
};
</script>

<style>
.error {
  color: red;
}
</style>

这个示例代码演示了如何使用Vue 3和uni-app实现表单校验。在模板中，我们使用`v-model`指令绑定表单输入的值，并使用`v-if`指令根据校验结果显示错误信息。在`setup`函数中，我们定义了`formData`和`errors`的响应式变量，并编写了`validateForm`函数来进行表单校验。最后，在提交表单时，我们调用`validateForm`函数来判断表单是否通过校验，如果通过则提交表单。