微信小程序)表单验证开发二

一.知识点

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>

.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中表单组件的具体介绍

以上就是微信小程序)表单验证开发二的详细内容，更多内容请关注技术你好其它相关文章！