Element Plus 表单校验：如何验证输入内容是否为邮箱类型

\u003ctemplate\u003e\n \u003cel-form :model\u003d"form" :rules\u003d"rules"\u003e\n \u003cel-form-item label\u003d"邮箱" prop\u003d"email"\u003e\n \u003cel-input v-model\u003d"form.email"\u003e\n \u003c/el-input\u003e\n \u003c/el-form-item\u003e\n \u003cel-button type\u003d"primary" @click\u003d"submitForm"\u003e提交\u003c/el-button\u003e\n \u003c/el-form\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n export default {\n data() {\n return {\n form: {\n email: '',\n },\n rules: {\n email: [\n { required: true, message: '请输入邮箱', trigger: 'blur' },\n { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] },\n ],\n },\n };\n },\n methods: {\n submitForm() {\n this.$refs.form.validate((valid) => {\n if (valid) {\n // 表单校验通过，执行提交操作\n // ...\n } else {\n // 表单校验未通过，显示错误信息\n // ...\n } \n });\n },\n },\n};\n\u003c/script\u003e\n\n在上述示例中，我们使用el-form组件包裹输入框，并设置了prop属性为"email"，这是为了在表单校验时标识该字段。rules属性中定义了校验规则，其中email字段的校验规则为必填且必须为邮箱格式。\n\n在submitForm方法中，我们通过this.$refs.form.validate方法来触发表单校验。校验通过后，可以执行提交操作；校验未通过，则显示错误信息。\n\n请注意，以上示例仅展示了element plus中的表单校验方法，具体的表单提交逻辑需要根据实际需求自行编写。