vue3 - 有用过vue-element-plus-admin的吗？封装的Form怎么在点击按钮的时候去判断必填？

Question

http://element-plus-admin-doc.cn/
有用过上面的框架的吗？封装的Form表单，我在表单叫加个提交按钮怎么去判断需要必须的是否填了没？

Answer 1

我没用过但是因为是基于element-plus的所以差不多？
看element-plus的官方文档这里 官方文档-表单校验
如果是对整个表单范围的内做判断就参照着写就行了
自定义校验规则的话你就给这个按钮绑定一个校验事件,我拿简单的校验登录作例子：

<el-input v-model="form.username" type="text" placeholder="用户名/邮箱">    <template #prefix>        <el-icon>            <User />        </el-icon>    </template></el-input><el-input v-model="form.password" type="password" style="margin-top: 10px;" placeholder="密码">    <template #prefix>        <el-icon>            <Lock />        </el-icon>    </template></el-input><el-button @click="login" style="width: 200px;" type="success" plain>立即登录</el-button>

const form = reactive({    username: '',    password: '',    remember: false})const login = () => {    if (!form.username || !form.password) {        ElMessage.warning('请填写用户名和密码!')    } else {        post('/api/auth/login', {            username: form.username,            password: form.password,            remember: form.remember        }, (message) => {            ElMessage.success(message)            router.push('/index')        })    }}

Answer 2

问题：有用过vue-element-plus-admin的吗？封装的Form怎么在点击按钮的时候去判断必填？

回答：
是的，我熟悉vue-element-plus-admin这个框架。对于判断表单必填字段的问题，你可以利用Element Plus提供的表单验证功能。以下是一个基本的示例，展示如何在点击提交按钮时判断必填字段：

1. 确保你的表单项具有rules属性，该属性定义了验证规则。例如，对于必填字段，你可以设置required: true。

<el-form :model="form" :rules="rules" ref="formRef">  <el-form-item label="必填项" prop="requiredField">    <el-input v-model="form.requiredField"></el-input>  </el-form-item>  <el-button type="primary" @click="submitForm">提交</el-button></el-form>

2. 在Vue组件的data中定义表单模型和验证规则：

data() {  return {    form: {      requiredField: ''    },    rules: {      requiredField: [        { required: true, message: '请填写必填项', trigger: 'change' }      ]    }  };},

3. 在方法中实现submitForm函数，该函数会触发表单验证：

methods: {  submitForm() {    this.$refs.formRef.validate((valid) => {      if (valid) {        // 验证通过，执行提交操作        console.log('表单已提交');      } else {        // 验证失败，显示错误信息        console.log('表单验证失败');        return false;      }    });  }}

在这个示例中，当用户点击提交按钮时，submitForm方法会被调用。这个方法通过this.$refs.formRef.validate触发表单验证。如果所有必填字段都已填写且满足其他验证规则，valid参数将为true，然后你可以执行实际的提交操作。如果验证失败，valid参数将为false，你可以根据需要处理错误。

请确保你已经在项目中正确安装并引入了Element Plus库，并在Vue组件中注册了相关的组件和指令。