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>
相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript