526互联

基于element-plus实现表单校验

发布时间 2023-12-05 11:00:31作者: 自学Java笔记本

官网

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>