vue3添加行表单校验

在Vue3中，可以通过使用第三方包vee-validate来实现表单校验。首先，在项目根目录下打开终端，并执行命令npm i vee-validate@4.0.3来安装vee-validate。接下来，使用vee-validate提供的Form标签将整个表单区域包裹起来，并使用Field标签替换输入框的input标签。对于需要校验的表单字段，必须添加name属性，并将校验规则通过rules属性绑定到Field标签上。当用户输入的内容未通过验证规则时，错误信息将从Form标签的插槽中获取。

相关问题

vue3使用element表单校验

1. 引入 element-plus 库

import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

2. 在 template 中使用表单组件

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

3. 在 script 中定义表单数据、校验规则和提交方法

<script>
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

export default {
  name: 'FormDemo',
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 校验通过，提交表单
          console.log('submit form:', this.form);
        } else {
          // 校验不通过，提示用户
          console.log('validate failed');
        }
      })
    }
  }
}
</script>

4. 在 methods 中定义 submitForm 方法，使用 $refs.form.validate() 方法校验表单数据。如果校验通过，则提交表单数据；如果校验不通过，则提示用户。

5. 在校验规则中，可以设置多个校验规则。每个规则都包含三个属性：required 表示是否必填，message 表示校验不通过时的提示信息，trigger 表示触发校验的事件。常用的触发事件有 blur（失去焦点时校验）和 change（值改变时校验）。

6. 注意：在 Vue 3 中，必须使用 v-model 指令绑定表单数据，不能使用 v-bind:value 和 v-on:input，否则校验不会生效。

vue3邮箱的表单校验

Vue3中对邮箱地址的表单验证通常会利用HTML5的内置`<input>`元素的`pattern`属性结合自定义的JavaScript或Vue的响应式特性来完成。以下是简单的步骤：

1. **HTML**:

<input v-model="email" type="email" placeholder="请输入邮箱" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>

这里，`type="email"`确保浏览器自带验证，`pattern`设置了一般邮箱地址的正则表达式，`required`属性表示必填。

2. **Vue**:

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

const email = ref('');
</script>

<!-- 如果有错误提示 -->
<div v-if="!$v.email.$valid" class="error">请输入有效的邮箱地址</div>

<script>
// 使用Vue的验证规则
const rules = {
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
};

const validate = (rule, value) => {
  if (!value || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
    return false;
  }
};

const formValidations = useForm({
  email,
  rules,
  validationOnBlur: true,
  validate,
});
</script>

这里使用了`v-model`双向绑定数据到输入框，并通过` useForm`库（如` vuelidate`或` Vuelidate`）来进行全局或局部验证。