一、頁面效果

二、json文件

//獲取應用實例 const app = getApp() Page({/*** 頁面的初始數據*/data: {array: ['速美', '現代', '淮安'],mode: 'scaleToFill',src: '../../images/1.png',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),userName: '',mobile: ''},userNameInput: function(e) {this.setData({userName: e.detail.value})},mobileInput: function(e) {this.setData({mobile: e.detail.value})},btnclick: function() {var userName = this.data.userName;var mobile = this.data.mobile;var phonetel = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;var name = /^[u4E00-u9FA5]+$/;if (userName == '') {wx.showToast({title: '請輸入用戶名',icon: 'succes',duration: 1000,mask: true})return false} else if (mobile == '') {wx.showToast({title: '手機號不能為空',})return false} else if (mobile.length != 11) {wx.showToast({title: '手機號長度有誤！',icon: 'success',duration: 1500})return false;}var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;if (!myreg.test(mobile)) {wx.showToast({title: '手機號有誤！',icon: 'success',duration: 1500})return false;}return true;},//事件處理函數bindPickerChange: function(e) {console.log('picker發送選擇改變，攜帶值為', e.detail.value)this.setData({index: e.detail.value})},bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},/*** 生命周期函數--監聽頁面加載*/onLoad: function(options) {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse) {// 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回// 所以此處加入 callback 以防止這種情況app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在沒有 open-type=getUserInfo 版本的兼容處理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})},// 表單提交數據formSubmit: function(e) {console.log(e.detail.value)// var that = this;// var formData = e.detail.value;// wx.request({// url: 'http://test.com:8080/test/socket.php?msg=2',// data: formData,// header: {// 'Content-Type': 'application/json'// },// success: function (res) {// console.log(res.data)// that.modalTap();// }// })},formReset: function() {console.log('form發生了reset事件');},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function() {},/*** 生命周期函數--監聽頁面顯示*/onShow: function() {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function() {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function() {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function() {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function() {},/*** 用戶點擊右上角分享*/onShareAppMessage: function() {} })

三、wxml頁面

<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><form bindsubmit="formSubmit" bindreset="formReset"><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/mine.png"></image><input name="mine" placeholder="姓名" maxlength='12'value="" bindinput ="userNameInput" /></view><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/phone.png"></image><input name="phone" placeholder="手機號" maxlength='11'value="" bindinput ="mobileInput" /></view><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/city.png"></image><input name="city" placeholder="城市" /></view><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/address.png"></image><input name="address" placeholder="地址" /></view><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/style.png"></image><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">風格：{{array[index]}}</picker><!-- <input name="style" placeholder="風格" /> --></view><view class="section"><image style="width: 30px; height: 30px;" mode="{{mode}}" src="../../images/area.png"></image><input name="area" placeholder="面積" /></view><view class="btn-area"><button formType="reset" class='btn-left'>取消</button><button formType="submit" class='btn-right' bindtap='btnclick' >確定</button></view></form> </view>

?

總結

以上是生活随笔為你收集整理的微信小程序正则判断姓名和手机号的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。