vue3 tsx element plus 中表单校验

这篇具有很好参考价值的文章主要介绍了vue3 tsx element plus 中表单校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

// 以下都是单个input校验更加灵活
// LoginForm.tsx 
import { defineComponent, ref } from 'vue'
import { validateUsername, validatePassword } from './validate'

export default defineComponent({
  name: 'LoginForm',

  setup() {
    const username = ref('')
    const password = ref('')
    const errors = ref({ username: '', password: '' })

    const validateInput = (field: 'username' | 'password') => {
      let validationResult
      if (field === 'username') {
        validationResult = validateUsername(username.value)
      } else {
        validationResult = validatePassword(password.value)
      }
      if (validationResult === true) {
        errors.value[field] = ''
      } else {
        errors.value[field] = validationResult
      }
    }

    return () => (
      <div>
        <form onSubmit={(event) => {
          event.preventDefault()
          validateInput('username')
          validateInput('password')
          if (!errors.value.username && !errors.value.password) {
            alert('登录成功!')
          }
        }}>
          <label>
            用户名:
            <input
              type="text"
              placeholder="输入用户名"
              value={username.value}
              onInput={(event) => {
                username.value = event.target.value
                validateInput('username')
              }}
            />
            {errors.value.username && <p style="color: red">{errors.value.username}</p>}
          </label>
          <label>
            密码:
            <input
              type="password"
              placeholder="输入密码"
              value={password.value}
              onInput={(event) => {
                password.value = event.target.value
                validateInput('password')
              }}
            />
            {errors.value.password && <p style="color: red">{errors.value.password}</p>}
          </label>
          <button type="submit">登录</button>
        </form>
      </div>
    )
  },
})

// validate.ts
export function validateUsername(username?: string): string | true {
  if (!username) {
    return '用户名不能为空!'
  }
  return true
}

export function validatePassword(password?: string): string | true {
  if (!password) {
    return '密码不能为空!'
  }
  return true
}

下边是统一校验
 文章来源地址https://www.toymoban.com/news/detail-475665.html

// LoginForm.tsx
import { defineComponent, ref } from 'vue'
import { validateLogin } from './validate'

export default defineComponent({
  name: 'LoginForm',

  setup() {
    const username = ref('')
    const password = ref('')
    const errors = ref({ username: '', password: '' })

    const submitForm = () => {
      const validationResult = validateLogin(username.value, password.value)
      if (validationResult === true) {
        alert('登录成功!')
        errors.value = { username: '', password: '' }  // Clear errors on success
      } else {
        errors.value[validationResult.field] = validationResult.error
      }
    }

    return () => (
      <div>
        <form onSubmit={(event) => {
          event.preventDefault()
          submitForm()
        }}>
          <label>
            用户名:
            <input
              type="text"
              placeholder="输入用户名"
              value={username.value}
              onInput={(event) => (username.value = event.target.value)}
            />
            {errors.value.username && <p style="color: red">{errors.value.username}</p>}
          </label>
          <label>
            密码:
            <input
              type="password"
              placeholder="输入密码"
              value={password.value}
              onInput={(event) => (password.value = event.target.value)}
            />
            {errors.value.password && <p style="color: red">{errors.value.password}</p>}
          </label>
          <button type="submit">登录</button>
        </form>
      </div>
    )
  },
})
// validate.ts
export function validateLogin(username: string, password: string): { field: string; error: string; } | true {
  if (!username) {
    return { field: 'username', error: '用户名不能为空!' }
  }
  if (!password) {
    return { field: 'password', error: '密码不能为空!' }
  }
  return true
}

到了这里,关于vue3 tsx element plus 中表单校验的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-plus表单校验

    el-form标签上定义rules属性进行双向绑定  :rules=\\\"loginRules\\\"  ,loginRules这个校验规则定义在data数据里,(1)要注意的是loginRules里面定义username和password需要与表单数据绑定的参数同名。(2)username: [{ required: true, message: \\\'账号不能为空哦\\\', trigger: \\\'blur\\\' }] , 其中required校验必填不

    2024年02月11日
    浏览(41)
  • Vue3+Element Plus 关于Dialog弹出Form表单,使用resetFields重置无效的解决

    主要参考了element-plus官方的表单重置按钮(官方Form例子任意reset按钮),然后试了试他的ref绑定,发现可以完美解决重置问题。 第一步:给Form表单绑定ref。绑定ref 的值为refFormInstance();这里注意表单el-form-item必须有prop属性。 2.第二步:在你想要重置的地方调用重置表单方法

    2024年01月21日
    浏览(49)
  • element plus自定义组件表单校验

    方式一: 方式二: element ui 自定义组件校验方式,详见以下链接地址 使用element Form 自带校验功能,实现上传控件的校验_element form 校验mixin-CSDN博客​​​​​ ant design vue 1.x 自定义组件校验方式,详见以下链接​​​​​​​ant design vue1.x 自定义校验_1.x ant-design-vue date-ran

    2024年02月01日
    浏览(56)
  • Vue3+Element-Plus 实现用户列表页面的UI结构及动态加载表单功能 三一

    1.1 头部是一个面包屑 (Breadcrumb)导航区域 1.2 白色区域是一个卡片(Card)视图 1.3 卡片 (Card)视图中嵌套了   输入框(Input )、 按钮(Button)、 表单(Form)、分页(Pagination ) Breadcrumb 面包屑 | Element Plus (gitee.io) https://element-plus.gitee.io/zh-CN/component/breadcrumb.html  2.1.1 复制

    2023年04月09日
    浏览(59)
  • 【TSX】vue3 + element-ui + tsx 通用表格组件

    简介: 基于 vue3 + el-table 封装的通用表格组件 的 tsx写法,想要参考模板写法的可以到我另一篇博客喔~ TS + vue3.2 + vite2 + element-plus 通用表格组件封装 话不多说,本组件分为四部分: 组件调用:   属性及方法使用说明: 注意:如果你在使用 Sortable插件想要拖动排序表格时,t

    2024年02月15日
    浏览(48)
  • Element Plus Form 动态表单自定义校验规则使用教程

    Element Plus,基于 Vue 3,面向设计师和开发者的组件库 Element Plus 官网:https://element-plus.org/zh-CN/ Element Plus Form 动态表单自定义效验规则,官网示例代码中没有,官网示例中的动态表单是固定的规则,本文讲解动态表单自定义规则的使用 目录 1、官网动态表单示例代码 2、表单自

    2024年01月18日
    浏览(52)
  • vue3 ts element plus form表单二次封装详细步骤 (附参数、类型详细介绍及简单使用示例)

    上篇table 表格封装 讲到项目中经常会用到 table 表格,所以做了封装。当然,form 表单使用的频率依然很高,所以和封装 table 表格的思路相似,对 form 表单也做了一个二次封装的组件。 查看国内预览站 查看国外预览站 1. EasyForm 表单组件封装 src/components/EasyForm/index.vue Form 表单

    2024年02月07日
    浏览(61)
  • Vue3 + TS + Element-Plus —— 项目系统中封装表格+搜索表单 十分钟写五个UI不在是问题

    前期回顾 纯前端 —— 200行JS代码、实现导出Excel、支持DIY样式,纵横合并-CSDN博客 https://blog.csdn.net/m0_57904695/article/details/135537511?spm=1001.2014.3001.5501 目录 一、🛠️  newTable.vue 封装Table 二、🚩 newForm.vue 封装搜索表单  三、📝 TS类型 srctypesglobal.d.ts 四、♻️ 页面使用功能

    2024年01月24日
    浏览(63)
  • vue3使用el-form实现登录、注册功能,且进行表单验证(Element Plus中的el-form)

    简介:Element Plus 中的 el-form 是一个表单组件,用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则,使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 ,这两天在vue3中用到了表单登录,特意记录一下,这里没有封装,直接使

    2024年02月07日
    浏览(73)
  • Vue element UI多个表单同时校验

    情况1:如下情景的多表单,两个表单之间没有任何关系。 假设两个表单绑定的ref分别是form1,form2;  也可以这样写:  情况2:如下情景的多表单,两个表单是通过for循环出来,所用的验证规则相同。

    2024年02月06日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包