基于element-plus实现表单校验

官网

https://element-plus.org/zh-CN/component/form.html#自定义校验规则

需求

在日常开发中,我们需要对表单的内容进行校验,确保用户输入的符合我们正常的业务,并赋予正确的提示,以登录注册举例:
功能需求说明:

  • 注册功能(校验+注册)

当用户输入用户名移开文本框后,也就是失去焦点时,需要去校验用户输入的内容是否符合,如果错误并给予提示。
image

代码如下:

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
const isRegister = ref(true)
// 注册
// 整个的用于提交的form数据对象
const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})
// 自定义校验规则
const checkPassword = (rule, value, callback) => {
  // value 是当前字段的值,this 是表单对象
  if (value !== formModel.value.password) {
    return callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}
// 整个表单的校验规则
const rules = {
  //1.非空校验 trigger 什么时候触发,blur 表示失去焦点时,required为空校验,message为提示信息
  //2.长度校验 min 最小长度 max 最大长度 message 提示信息
  //3.正则校验 pattern:正则规则  \S 非空字符
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' },
    {
      pattern: '/^[a-zA-Z][a-zA-Z0-9_]{0,}$/',
      message: '用户名只能包含字母、数字和下划线',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: '/^\\S{6,15}$/',
      message: '密码长度6-15位,且不能有空字符',
      trigger: 'blur'
    }
  ],
  repassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: checkPassword, trigger: 'blur' } // 自定义验证规则
  ]
}
</script>

<template>
 <el-form
        :model="formModel" // 表单绑定的数据
        :rules="rules"    // 校验规则
        ref="form"
        size="large"
        autocomplete="off"
        v-if="isRegister"
      >
        <el-form-item>
          <h1>注册</h1>
        </el-form-item>
        <el-form-item prop="username">    // prop中的值与rules值要一致
          <el-input
            v-model="formModel.username" // 双向绑定
            :prefix-icon="User"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
</template>

注册之前的预校验

image

步骤:

  • form表单中通过ref属性标识
    image

  • 在组合式js中与ref关联
    const form = ref()

  • 在注册按钮中添加点击事件

<el-button
            class="button"
            type="primary"
            @click="register"
            auto-insert-space
          >
            注册
          </el-button>
  • 定义处理点击事件的函数
// 注册按钮的点击事件
const register = async () => {
  // 调用表单的validate方法,进行校验,validate成功后有回调函数
  await form.value.validate() // 如果校验失败,会自动错误提示
  console.log('开始注册请求')
}
posted @   自学Java笔记本  阅读(546)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示