uni-app跨平台开发小程序表单校验

1.获取表单数据,根据接口需要来定义数据名称并获取数据(以手机号,验证码为例)

TypeScript 复制代码
<script setup lang="ts">
  import { ref } from 'vue'
  // 1. 表单数据
    const formData = ref({
    //手机号
    mobile: '',
    //验证码
    code: '',
  })

</script>

2.定义数据验证规则

为不同的表单数据定义不同的验证规:

  • 验证中文姓名正则 ^[\u4e00-\u9fa5]{2,5}$
  • 验证身份证 ^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$
TypeScript 复制代码
<script setup lang="ts">
// 验证表单数据的规则
const rules = {
  mobile: {
    rules: [
      { required: true, errorMessage: '手机号不能为空' },
      { pattern: '^[1][3-9][0-9]{9}$', errorMessage: '手机号格式不正确' }
    ]
  },
  code: {
    rules: [
      { required: true, errorMessage: '验证码不能为空' },
      { pattern: '^[0-9]{6}$', errorMessage: '请输入6位数字验证码' }
    ]
  }
}
</script>

3.调用验证方法

await form.value.validateField(['mobile'])

validateField:校验部分表单

validate:校验全部表单

TypeScript 复制代码
<script setup>
  import { ref } from 'vue'
  // 表单组件 ref
  // 省略前面的代码...

  // 3. 提交表单数据
 const formRef = ref()
  async function onFormSubmit() {
    try {
      // 根据验证规则验证数据
     await formRef.value.validate()
    } catch(error) {
    	console.log(error)
    }
  }
</script>
TypeScript 复制代码
<uni-forms class="" ref="formRef" :rules="rules" :model-value="formData">

<button @click="onFormSubmit"> 提交表单数据 </button>

</uni-forms>
相关推荐
liulilittle几秒前
C++ i386/AMD64平台汇编指令对齐长度获取实现
c语言·开发语言·汇编·c++
无我Code1 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟3 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light19 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子22 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空000022 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心22 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再23 分钟前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
susnm27 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v31 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript