广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

上一篇我们和大家分享了微信小程序之表单组件分享一，本文我们主要和大家分享微信小程序)表单验证开发二，希望能帮助到大家。

一.知识点

1.是否为空

if(e.detail.value.userName.length==0||e.detail.value.psw.length==0||e.detail.value.tel.length==0){      this.setData({        tip:'提示：不能为空！',      })    }

2.正则表达式：

手机号码：var regtel=new RegExp('(^1[3|4|5|7|8][0-9]{9}$)','g');

<input  name="tel" placeholder="请输入手机号码"  type="text" focus="false" class="section__iput"/>

 if(!regtel.exec(e.detail.value.tel)){    this.setData({        tip:'手机号码格式不正确！',      })    }

二.看列子

1.index.wxml

<form bindsubmit="formSubmit" bindreset="formReset"><view class="section"><view class="section__title">姓名：</view><input name="userName" placeholder="请输入姓名"  maxlength="12" type="text" focus="false" class="section__iput"/></view><view class="section">  <view class="section__title">手机号码：</view>  <input  name="tel" placeholder="请输入手机号码"  type="text" focus="false" class="section__iput"/></view><view class="section">  <view class="section__title">密码：</view>  <input name="psw" placeholder="请输入您的密码" password="true" maxlength="12" type="text" focus="false" class="section__iput"/></view><view class="section section_gap"><view class="section__title">性别：</view><radio-group name="radio-group"><label><radio value="radio1" checked="ture"/>男</label><label><radio value="radio2"/>女</label></radio-group></view><view class="section">  <view class="section__title">日期:</view>  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" class="section__iput">    <view class="picker">     {{date}}    </view>  </picker></view><view class="section"><view class="section__title">留言：</view>  <textarea auto-height placeholder="请输入内容" /></view><view>{{tip}}</view><view class="btn-area"><button formType="submit" type="primary">Submit</button><button formType="reset"  type="default">Reset</button></view></form>

2.index.wxss

.section{margin:10px 20px; display:flex;border-bottom:1px solid #ccc;padding:15px 0;}.section__title{width:30%;}.section__iput{width:70%;line-height:25px;border:1px solid #ccc;}.btn-area{display:flex;justify-content:center;margin:20px;}.btn-area button{width:40%;}

3.index.js

var app = getApp()Page({data: {    date: '2016-09-01',    tip:'',},//日期bindDateChange: function(e) {    this.setData({      date: e.detail.value    })},//提交formSubmit: function(e) {var regtel=new RegExp('(^1[3|4|5|7|8][0-9]{9}$)','g');if(e.detail.value.userName.length==0||e.detail.value.psw.length==0||e.detail.value.tel.length==0){      this.setData({        tip:'提示：不能为空！',      })    }else if(!regtel.exec(e.detail.value.tel)){    this.setData({        tip:'手机号码格式不正确！',      })    }else{    this.setData({        tip:'',      })    }},//重置formReset: function() {    console.log('form发生了reset事件')}})

有更好的方式，欢迎大家来补充。。。

相关推荐：

微信小程序之表单组件分享一

html中关于表单组件的实例详解

关于HTML中表单组件的具体介绍

以上就是微信小程序)表单验证开发二的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~