Element Plus设置表单字段为必填

在使用 Element Plus（一个基于 Vue 3 的 Element UI 组件库）时，设置表单字段为必填通常涉及到两个方面：表单验证（Validation）和表单字段的提示信息。Element Plus 提供了强大的表单验证功能，通过 el-form 组件的 rules 属性可以定义表单验证规则，以及通过 el-form-item 组件的 prop 属性指定当前表单项对应的数据字段名，从而实现表单验证。

以下是一个简单的示例，展示了如何设置表单字段为必填：

<template>  <el-form :model="form" :rules="rules" ref="formRef" 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="email">  <el-input v-model="form.email" type="email"></el-input>  </el-form-item>  <el-button type="primary" @click="submitForm">提交</el-button>  <el-button @click="resetForm">重置</el-button>  </el-form>  
</template>  <script>  
import { ref } from 'vue';  export default {  setup() {  const form = ref({  username: '',  email: '',  });  const rules = {  username: [  { required: true, message: '请输入用户名', trigger: 'blur' },  ],  email: [  { required: true, message: '请输入邮箱地址', trigger: 'blur' },  { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] },  ],  };  const formRef = ref(null);  const submitForm = () => {  formRef.value.validate((valid) => {  if (valid) {  alert('提交成功!');  } else {  console.log('error submit!!');  return false;  }  });  };  const resetForm = () => {  formRef.value.resetFields();  };  return {  form,  rules,  formRef,  submitForm,  resetForm,  };  },  
};  
</script>

在这个示例中，我们定义了一个包含用户名和邮箱的表单。通过 rules 对象，我们为 username 和 email 字段分别设置了验证规则。对于 username 字段，我们设置了 required: true 来表示该字段为必填项，并定义了当该字段为空时显示的提示信息 message: '请输入用户名'。对于 email 字段，我们同样设置了必填规则，并额外添加了邮箱格式验证。

注意，trigger 属性定义了触发验证的时机，blur 表示在输入框失去焦点时触发验证，change 表示在输入框内容变化时触发验证。

在 submitForm 方法中，我们通过调用 formRef.value.validate 方法来触发整个表单的验证。如果验证通过，则执行相应的操作（如提交表单）；如果验证未通过，则显示错误信息。

最后，通过 ref="formRef" 将 el-form 组件的引用存储在 formRef 中，以便在 setup 函数中访问和操作表单。