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>
相关推荐
honder试试25 分钟前
焊接自动化测试平台图像处理分析-模型训练推理
开发语言·python
^Rocky30 分钟前
JavaScript性能优化实战
开发语言·javascript·性能优化
ponnylv1 小时前
深入剖析Spring Boot启动流程
java·开发语言·spring boot·spring
萧邀人1 小时前
第一课、Cocos Creator 3.8 安装与配置
开发语言
西陵1 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld1 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记1 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
Jayden_Ruan2 小时前
C++逆向输出一个字符串(三)
开发语言·c++·算法
不吃鱼的羊2 小时前
启动文件Startup_vle.c
c语言·开发语言