element plus form 校验 email

Element Plus 是一个基于 Vue 3 的组件库，其中的 Form 组件提供了丰富的表单校验功能。要使用 Element Plus 的 Form 组件进行电子邮件（email）校验，可以按照以下步骤进行操作：

1. 在表单组件中添加 email 校验规则：在 Form 组件中，可以使用 `rules` 属性来定义校验规则。在规则数组中添加一个对象，并指定 `rules` 属性为 `[ { required: true, message: '请输入电子邮件地址', trigger: 'blur' } ]`。

<el-form :model="form" :rules="rules" ref="form" label-width="120px">
  <el-form-item label="电子邮件" prop="email">
    <el-input v-model="form.email"></el-input>
  </el-form-item>
  <!-- 其他表单项 -->
</el-form>

在上述代码中，`rules` 属性定义了一个校验规则对象数组，其中第一个规则用于校验电子邮件字段。

2. 在表单模型中添加数据：在 Vue 组件的 data 方法中，添加一个名为 `form` 的表单模型对象，其中包含要校验的数据。

export default {
  data() {
    return {
      form: {
        email: '' // 这里是你的电子邮件字段的值
      }
    };
  }
}

3. 添加表单规则对象：在表单模型的 rules 属性中，定义一个对象，用于指定校验规则。在对象中添加一个 `email` 属性，用于指定电子邮件字段的校验规则。

export default {
  data() {
    return {
      rules: {
        email: [
          { required: true, message: '请输入电子邮件地址', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // 邮箱正则表达式
            if (emailRegex.test(value)) {
              callback(); // 邮箱格式正确，可以继续下一步校验流程
            } else {
              callback(Error('邮箱格式不正确')); // 邮箱格式错误，返回错误信息给用户提示
            }
          } ]
        }
      }
    };
  }
}

在上述代码中，我们使用正则表达式来验证电子邮件地址的格式是否正确。如果格式正确，则继续进行下一步校验流程；否则，返回错误信息给用户提示。

通过以上步骤，你就可以使用 Element Plus 的 Form 组件进行电子邮件字段的校验了。当用户在表单中输入电子邮件地址时，将会触发校验规则并显示相应的提示信息。