使用element-plus中的表单验证

标签页代码如下:

html 复制代码
// 注意:el-form中的数据绑定不可以用v-model,要使用:model
<el-form ref="ruleFormRef" :rules="rules" :model="userTemp" label-width="80px">
	<el-row :gutter="20">
		<el-col :span="12">
			<el-form-item label="账号" prop="username">
				<el-input v-model="userTemp.username"/>
			</el-form-item>
		</el-col>
		<el-col :span="12">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="userTemp.name"/>
			</el-form-item>
		</el-col>
	</el-row>
</el-form>
<el-button type="primary" @click="confirmAdd(ruleFormRef)">确定</el-button>

语法糖代码如下:

html 复制代码
<script setup lang="ts">
import {ElMessage, ElMessageBox, FormRules, FormInstance} from "element-plus"

const userTemp = ref({
  username: '',
  name: '',
})
// 自定义检验规则
const usernameCheck = (rule, value, callback) => {
  if (value === undefined) {
    callback(new Error('账号不能为空'))
  } else {
    if (value === '') {
      callback(new Error('账号不能为空'))
    } else {
      if (value !== '') {
        let reg = /^[A-Za-z0-9]+$/
        if (!reg.test(value)) {
          callback(new Error('账号只能是字母或数字'))
        }
      }
      callback()
    }
  }
}
const rules = ref<FormRules<typeof userTemp>>({
  username: [{required: true, validator: usernameCheck, trigger: 'blur'}],
  name: [{required: true, message: '姓名不能为空', trigger: 'blur'}]
})
// 该名称要和标签中ref的名称一样
const ruleFormRef = ref(null)

const confirmAdd = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // 验证成功进入这里
      console.log('验证成功')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 重置验证规则,调用resetForm(ruleFormRef.value)
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
相关推荐
天天扭码14 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder17 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte21 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang26 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子1 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子2 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神2 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao2 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui