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

百变鹏仔 5天前 #前端问答

文章标签表单

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

一.知识点

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

姓名：手机号码：密码：性别：男女日期: {{date}} 留言： {{tip}}Submit Reset

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

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

文章推荐

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

揭秘：魏则西离去真正的原因（派代网）

拒绝做微商被屏蔽拉黑，方法我有！（派代网）

【派代&amp;生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）

寻洲：微商警戒线，你知道几个？

拒绝做微商被屏蔽拉黑，方法我有！（）

【派代&生意参谋电商论剑征文大赛】重磅！不看江湖地位，只论技法高下，等你来战！（）