element-ui 中表单校验的用法

前言

表单校验在前端工作中非常常见，表单校验可以规范用户的输入，以及防止用户的误操作，确保用户提交数据的有效性。

表单验证属性

做表单验证离不开这三个属性model、rules、prop，当然也别忘了ref哈；

• model是待校验的对象：
• rules 定义校验规则；
• prop绑定要校验的表单域；

其中，rules和prop是一一对应的。

知道了，这些属性是干什么的，表单校验就学会一半了。

首先，在el-form标签里面添加:model="ruleForm"，:rules="rules"；

  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
  >

然后在需要校验的el-form-item标签，加上prop属性绑定好表单域；

ps: 在el-form-item里面添加的prop属性，要与:model="ruleForm"的ruleFormm的属性一一对应。

<el-form-item  prop="name">

最后，设置校验规则，校验待校验对象，提交的时候判断一下即可完成验证；

const rules = reactive<FormRules>({
  name: [
    { 
        // 必传项
        required: true, 
        // 提示文本
        message: '请输入姓名', 
        // 触发方式
        trigger: 'blur' },
    { 
        // 最小长度
        min: 2, 
        // 最大长度
        max: 8, 
        message: '长度应为 2 到 8', 
        trigger: 'blur' },
  ],
})

示例代码

<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
  >
    <el-form-item label="姓名" prop="name">
      <el-input v-model="ruleForm.name"  placeholder="例如：张三"/>
    </el-form-item>
    <el-form-item label="地区" prop="region">
      <el-select v-model="ruleForm.region" placeholder="例如：北京">
        <el-option label="北京" value="beijing" />
        <el-option label="上海" value="shanghai" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
        >提交</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: '',
  region: '',
})

const rules = reactive<FormRules>({
  name: [
    { 
        required: true, 
        message: '请输入姓名', 
        trigger: 'blur' },
    { 
        min: 2, 
        max: 8, 
        message: '长度应为 2 到 8', 
        trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: '请选择地区',
      trigger: 'change',
    },
  ],
})

// 提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('表单提交成功')
    } else {
      console.log('表单提交失败', fields)
    }
  })
}

// 重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！