vue3+element-plus表单验证方式_vue3 +ts+element plus表单验证-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_58235310/article/details/134288255

本文介绍了如何在Vue中使用ElementUI的El-Form组件创建一个带有响应式设计和必填项验证的登录表单，包括用户名和密码输入字段以及登录按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们最后要得到的是：

先定义一个什么也没有的表单。我定义了一个表单，这个表单有用户名、密码、登录、注册。

<el-form class="w-[250px]">
    <!-- 和表单验证属性相对应 -->
    <el-form-item>
      <!-- 给input添加图标 -->
      <el-input placeholder="请输入用户名">
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-input type="password" show-password placeholder="请输入密码">
      </el-input>
    </el-form-item>
    <el-form-item class="">
      <el-button round color="#626aef" type="primary" class="w-[250px]">登录</el-button>
    </el-form-item>
  </el-form>

然后我们给表单的每个item加上它的响应式数据:

响应式数据是用:model=""来定义的，将其分配给item使用的是prop。

<script setup>
import { ref, reactive } from 'vue';
const form = reactive(
  {
    username: '',
    password: ''
  }
)
</script>



<template>
<el-form class="w-[250px]" :model="form">
    <!-- 和表单验证属性相对应 -->
    <el-form-item prop="username">
      <!-- 给input添加图标 -->
      <el-input placeholder="请输入用户名">
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" show-password placeholder="请输入密码">
      </el-input>
    </el-form-item>
    <el-form-item class="">
      <el-button round color="#626aef" type="primary" class="w-[250px]">登录</el-button>
    </el-form-item>
  </el-form>
</template>

最后是进行表单验证属性rules的添加

<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { ref, reactive } from 'vue';


const form = reactive(
  {
    username: '',
    password: ''
  }
)
const rules = reactive({
  username: {
    required: true,//必填
    message: '用户名不能为空',//验证提示
    trigger: 'blur',//触发时机，这里是失去焦点
  },
  password: {
    required: true,//必填
    message: '密码不能为空',//验证提示
    trigger: 'blur',//触发时机，这里是失去焦点
  },
})

</script>

<template>
 
  <el-form class="w-[250px]" :model="form" :rules="rules">
    <!-- 和表单验证属性相对应 -->
    <el-form-item prop="username">
      <!-- 给input添加图标 -->
      <el-input placeholder="请输入用户名">
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" show-password placeholder="请输入密码">
      </el-input>
    </el-form-item>
    <el-form-item class="">
      <el-button round color="#626aef" type="primary" class="w-[250px]">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped></style>