关于项目中遇到的一些form表单校验

1.model 属性绑定 form 数据对象

javascript 复制代码
const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})

<el-form :model="formModel" >

2.v-model 绑定 form 数据对象的子属性

javascript 复制代码
<el-input
  v-model="formModel.username"
  :prefix-icon="User"
  placeholder="请输入用户名"
></el-input>
... 
(其他两个也要绑定)

3.rules配置校验规则

javascript 复制代码
<el-form :rules="rules" >
    
// 整个表单的校验规则
// 1.非空校验 required: true  message消息提示,trigger触发校验的时机 blur change
// 2.长度校验 min: xx, max: xx
// 3.正则校验 pattern: 正则规则   \S 非空字符
// 4.自定义校验 => 自己写逻辑校验(校验函数)
//   validator: (rules, value, callback)
//   (1)rule 当前校验规则的相关信息
//   (2)value 所校验的表单元素目前的表单值
//   (3)callback 无论成功还是失败,都需要 callback 回调
//             -callback() 校验成功
//             -callback(new Error(错误信息))
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是 5-10 位 的字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15位的非空字符',
      trigger: 'blur'
    }
  ],
  repassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15位的非空字符',
      trigger: 'blur'
    },
    {
      validator: (rules, value, callback) => {
        // 判断 value 和 当前 form 中收集的 password 是否一致
        if (value !== formModel.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback() //就算校验成功,也需要callback
        }
      },
      trigger: 'blur'
    }
  ]
}

4.prop 绑定校验规则

javascript 复制代码
<el-form-item prop="username">
  <el-input
    v-model="formModel.username"
    :prefix-icon="User"
    placeholder="请输入用户名"
  ></el-input>
</el-form-item>
... 
(其他两个也要绑定prop)
相关推荐
永日45670几秒前
学习日记-HTML-day51-9.9
前端·学习·html
狗头大军之江苏分军17 分钟前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding17 分钟前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试
文心快码BaiduComate29 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger30 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer98136 分钟前
基于webpack的场景解决
前端·webpack
华科云商xiao徐43 分钟前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手1 小时前
css3之grid布局
前端·css·css3
举个栗子dhy1 小时前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js