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>
相关推荐
顺丰同城前端技术团队4 分钟前
DeepSeek 国产大模型新标杆
前端·后端·程序员
Java水解5 分钟前
微前端架构:从单体到模块化的前端新革命
前端
Mr_汪7 分钟前
uniapp使用h5的map(已弃用)
前端
前端进阶者10 分钟前
vite调试node_modules下面插件
前端·vite
YaHuiLiang18 分钟前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
用户261245834016121 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
CAD老兵27 分钟前
前端 Source Map 原理与结构详解
前端
运器12329 分钟前
【一起来学AI大模型】算法核心:数组/哈希表/树/排序/动态规划(LeetCode精练)
开发语言·人工智能·python·算法·ai·散列表·ai编程
gnip31 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长42 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome