Element Plus设置表单字段为必填

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

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

javascript 复制代码
<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 对象,我们为 usernameemail 字段分别设置了验证规则。对于 username 字段,我们设置了 required: true 来表示该字段为必填项,并定义了当该字段为空时显示的提示信息 message: '请输入用户名'。对于 email 字段,我们同样设置了必填规则,并额外添加了邮箱格式验证。

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

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

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

相关推荐
前端付豪1 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮1 小时前
js符号(Symbol)
前端·javascript
大怪v2 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
遂心_3 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
王同学QaQ4 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊4 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮5 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort5 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手5 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码5 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js