使用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>
相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one1 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲1 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830943 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel4 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常4 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全5 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json