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>
相关推荐
万邦科技Lafite19 分钟前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
Never_Satisfied2 小时前
在JavaScript / Node.js / 抖音小游戏中,使用tt.request通信
开发语言·javascript·node.js
爱吃小胖橘2 小时前
Unity资源加载模块全解析
开发语言·unity·c#·游戏引擎
一只小透明啊啊啊啊3 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友3 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao4 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
千里镜宵烛4 小时前
Lua-迭代器
开发语言·junit·lua
啃火龙果的兔子4 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...4 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪4 小时前
函数组件和异步组件
前端·javascript·面试