el-form 组件和 el-input 组件的关系

在el-form组件中，嵌套了el-input组件：

• 双向绑定与验证独立：el-input 的双向绑定与 el-form 的验证是独立的，验证失败不会影响双向绑定。

• 验证的作用：验证规则用于确保用户输入的内容符合特定的格式或条件，但不会阻止数据的同步。

• 开发中的注意事项：在开发中，即使验证失败，也可以通过 v-model 获取用户输入的内容，但需要在提交表单前进行验证，确保数据的有效性。

• 验证规则：

  • el-form 的 :rules="rules" 定义了验证规则。

  • el-form-item 的 prop 属性指定了需要验证的字段。

• 验证触发：

  • 验证规则在 trigger 指定的事件（如 blur）下触发。

  • 如果输入的内容不满足验证规则，会显示相应的错误信息，但输入的内容仍然会同步到 form 对象中。

• 表单提交：

  • 点击提交按钮时，调用 submitForm 方法。

  • formRef.value.validate 方法对表单进行验证，如果验证通过，则提交表单；否则显示验证失败的提示。

——————————————————————————————————————————

1. el-form 组件和 el-input 组件是什么关系？

el-form 和 el-input 是 Element Plus 中的两个组件，它们之间的关系是容器和子组件的关系。el-form 是一个表单容器组件，用于包裹表单项 (el-form-item) 和表单输入组件 (el-input 等)。el-input 是一个表单输入组件，通常用于输入文本。

2. 是否必须由 el-form 绑定 form 对象之后，el-input 组件才能够双向绑定 form 的数据？

不是必须的。el-input 组件可以通过 v-model 直接与 form 对象中的属性进行双向绑定，而不需要一定要通过 el-form 组件。但是，使用 el-form 组件可以更好地组织和管理表单数据，尤其是在需要表单验证、重置等功能时。

示例代码解读

<el-form :model="form" @submit.prevent="handleSubmit">
  <el-form-item label="用户名">
    <el-input v-model="form.username" />
  </el-form-item>
  
  <el-form-item label="密码">
    <el-input v-model="form.password" type="password" />
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" native-type="submit">
      {{ isLogin ? '登录' : '注册' }}
    </el-button>
    <el-button type="text" @click="isLogin = !isLogin">
      {{ isLogin ? '没有账号？去注册' : '已有账号？去登录' }}
    </el-button>
  </el-form-item>
</el-form>

代码解读

1. el-form 组件

<el-form :model="form" @submit.prevent="handleSubmit">

• :model="form": 将表单数据对象 form 绑定到 el-form 组件。这样，el-form 内部的表单输入组件（如 el-input）可以通过 v-model 直接访问 form 对象中的属性。

• @submit.prevent="handleSubmit": 监听表单的提交事件，当用户按下回车键或点击提交按钮时，会调用 handleSubmit 方法。.prevent 修饰符用于阻止表单的默认提交行为。

2. el-form-item 组件

        el-form-item 是 Element Plus 表单组件库中的一个组件，用于包裹表单输入组件（如 el-input、el-select、el-checkbox 等），并提供表单验证、标签显示等功能。它是 el-form 的子组件，通常与 el-form 一起使用，以构建结构清晰、功能完善的表单。

<el-form-item label="用户名">
  <el-input v-model="form.username" />
</el-form-item>

• label="用户名": 设置表单项的标签，显示为“用户名”。

• el-input: 这是 Element Plus 提供的输入框组件。

• v-model="form.username": 将输入框的值与 form.username 属性双向绑定。当用户在输入框中输入内容时，form.username 的值会自动更新；反之，当 form.username 的值在代码中被修改时，输入框的显示也会同步更新。

3. el-input 组件

<el-input v-model="form.username" />

• v-model="form.username": 实现双向绑定，将输入框的值与 form.username 属性同步。

4. 提交和切换按钮

<el-form-item>
  <el-button type="primary" native-type="submit">
    {{ isLogin ? '登录' : '注册' }}
  </el-button>
  <el-button type="text" @click="isLogin = !isLogin">
    {{ isLogin ? '没有账号？去注册' : '已有账号？去登录' }}
  </el-button>
</el-form-item>

• 提交按钮: 点击时会触发表单的提交事件，调用 handleSubmit 方法。

• 切换按钮: 点击时会切换 isLogin 的值，从而切换登录和注册界面。

总结

示例代码

<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-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" />
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)

const form = reactive({
  username: '',
  password: ''
})

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '密码长度在 6 到 18 个字符', trigger: 'blur' }
  ]
})

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('提交成功')
      console.log('表单数据:', form)
    } else {
      ElMessage.error('验证失败')
      return false
    }
  })
}
</script>

代码解读

• el-form 和 el-input 是 Element Plus 中的两个组件，el-form 是表单容器，el-input 是表单输入组件。

• el-input 可以直接通过 v-model 与 form 对象中的属性进行双向绑定，而不需要一定要通过 el-form 组件。

• 使用 el-form 组件可以更好地组织和管理表单数据，尤其是在需要表单验证、重置等功能时。

• 在使用 el-form 和 el-input 组件时，即使输入的内容无法通过 el-form 的验证，el-input 组件仍然可以成功地与数据进行双向绑定。验证和双向绑定是两个独立的功能，验证只是对输入的内容进行规则检查，而双向绑定则是确保输入的内容与数据对象保持同步。

  验证失败时的行为

• 验证失败不影响双向绑定：

  • 即使输入的内容不满足 el-form 的验证规则，el-input 组件仍然会将用户输入的内容同步到绑定的数据对象中。

  • 验证失败只会阻止表单的提交，并显示验证错误信息，但不会阻止数据的同步。

• 验证规则的作用：

  • 验证规则用于确保用户输入的内容符合特定的格式或条件。

  • 验证规则通过 el-form 的 rules 属性定义，并在特定的触发事件（如 blur 或 change）下进行验证。

• 表单数据绑定：

  • el-form 的 :model="form" 将表单数据对象 form 绑定到表单上。

  • el-input 的 v-model="form.username" 和 v-model="form.password" 实现了双向绑定，确保输入的内容与 form 对象中的属性同步。