vue3 element-plus表单验证

第一准备一个表单

form.vue

<template>
  <div>
    <el-form>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="data.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {reactive} from "vue";

const data = reactive({
  name:''
})

</script>

第二创建路由

index.js

  {
      path:'/form',
      name:'form',
      component:()=>import('../views/form.vue')
    },

第三看看是否可以访问

第四步添加验证规则

在<el-form>标签里使用 :rules="data.rules"

在data常量中加入rules对象

rules: {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ]
}

当光标失去焦点时就会触发

form.vue完整代码

<template>
  <div>
    <el-form  :rules="data.rules" :model="data">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="data.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {reactive,ref} from "vue";

const data = reactive({
  name:'',
  rules: {
    name: [
      { required: true, message: '请输入姓名', trigger: 'blur' },
      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ]
  }
})



</script>