uni-app进行表单效验

简介: uni-app进行表单效验

Uni-app内置了一些表单验证方法,可以帮助我们对表单进行有效的验证。以下是一些常用的验证方法:

  1. 非空验证:
if(!this.formData.name){
  uni.showToast({
    title: '请输入姓名',
    icon: 'none'
  });
  return false;
}
  1. 手机号码验证:
const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
if(!phoneReg.test(this.formData.phone)){
  uni.showToast({
    title: '请输入正确的手机号码',
    icon: 'none'
  });
  return false;
}
  1. 邮箱验证:
const emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if(!emailReg.test(this.formData.email)){
  uni.showToast({
    title: '请输入正确的邮箱地址',
    icon: 'none'
  });
  return false;
}
  1. 身份证号码验证:
const idCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(!idCardReg.test(this.formData.idCard)){
  uni.showToast({
    title: '请输入正确的身份证号码',
    icon: 'none'
  });
  return false;
}

可根据自己的需求进行组合验证,最后根据验证结果来判断表单是否可以提交。

相关文章
|
6月前
|
XML JSON Java
Android App网络通信中通过okhttp调用HTTP接口讲解及实战(包括GET、表单格式POST、JSON格式POST 附源码)
Android App网络通信中通过okhttp调用HTTP接口讲解及实战(包括GET、表单格式POST、JSON格式POST 附源码)
798 0
|
12月前
uni-app提交表单成功之后跳转首页
uni-app提交表单成功之后跳转首页
63 1
|
25天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
381 7
|
24天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
446 1
|
11天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
1月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
97 1
uniapp一个人开发APP关键步骤和考虑因素
|
25天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
52 9
|
29天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
157 1
|
8天前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!
|
29天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
459 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
下一篇
无影云桌面