前の記事では、WeChatミニプログラムフォームコンポーネントの共有1を共有しました。この記事では、主にWeChatミニプログラム)フォーム検証の開発2を共有します。
1. 知識のポイント
1. 空かどうか
携帯電話番号: 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:'提示:不能为空!', }) }
<input>
二.Liezi を見てください
1.index.wxml
if(!regtel.exec(e.detail.value.tel)){ this.setData({ tip:'手机号码格式不正确!', }) }
2 .index.wxss
<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>
.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%; }
もっと良い方法がありますので、皆さんもぜひ追加してください。 。 。
関連する推奨事項:
WeChat アプレット フォーム コンポーネントの共有以上がWeChat ミニ プログラム) フォーム検証開発 2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。