使用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>
相关推荐
Struggler281几秒前
Chrome插件开发
前端
前端 贾公子12 分钟前
Monorepo + vite 怎么热更新
前端
coding随想21 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip