微信小程序开发—(十四)表单验证2

ゝ一纸荒年。 2021-09-12 07:04 453阅读 0赞

一.知识点

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');

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

二.看列子

![20170516171057268][]

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事件') } })

有更好的方式，希望大家来补充。。。![吐舌头][tongue.gif]

[20170516171057268]: /images/20210813/aada834d274d49f2a7df02291c8031d0.png
[tongue.gif]: /images/20210813/f2616157baf34c20b2a5d9c78d7f2ddb.png