使用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>
相关推荐
懒大王95277 分钟前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
懒大王952711 分钟前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
yinuo18 分钟前
Uni-App跨端实战:微信小程序WebView与H5通信全流程解析(01)
前端
xkroy36 分钟前
ajax
前端·javascript·ajax
Yvonne爱编码40 分钟前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
闲人编程1 小时前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
JudithHuang1 小时前
Mac版微信开发者工具登录二维码不显示问题解决方案
前端
Swift社区1 小时前
如何解决 Vue2 前端项目为何无法访问本地资源(chunk.js 加载一直 pending/转圈)
开发语言·前端·javascript
清风细雨_林木木1 小时前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js