微信小程序 --- 表单输入验证(手机号、邮箱验证、输入非空)
js代码
Page({
/**
* 页面的初始数据
*/
data: {
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000,
proList: null,
name:"",
phone:"",
email:"",
company:"",
job:"",
vip:""
},
// 判定输入为非空字符
formSubmit: function (e) {
var name = e.detail.value.name;
var phone = e.detail.value.phone;
// mobile
var email = e.detail.value.email;
var company = e.detail.value.mobile;
var job = e.detail.value.job;
var vip = e.detail.value.vip;
if (name==""||phone==""||email==""||company==""||job==""||vip==""){
wx.showModal({
title: '提示',
content: '请输入完整信息!',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
} else{
console.log(e.detail.value)
// detail
}
},
loginBtnClick: function () {
if (this.data.name.length == 0 || this.data.phone.length == 0) {
this.setData({
infoMess: '温馨提示:用户名和密码不能为空!',
})
} else {
this.setData({
infoMess: '',
name: '用户名:' + this.data.userN,
phone: '密码:' + this.data.passW
})
}
},
// 手机号部分
inputPhoneNum: function (e) {
let phoneNumber = e.detail.value
if (phoneNumber.length === 11) {
let checkedNum = this.checkPhoneNum(phoneNumber)
}
},
checkPhoneNum: function (phoneNumber) {
let str = /^1\d{10}$/
if (str.test(phoneNumber)) {
return true
} else {
wx.showToast({
title: '手机号不正确',
image: './../../../../images/fail.png'
})
return false
}
},
// 邮箱验证部分
inputemail: function (e) {
let email = e.detail.value
let checkedNum = this.checkEmail(email)
},
checkEmail: function (email) {
let str = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
if (str.test(email)) {
return true
} else {
wx.showToast({
title: '请填写正确的邮箱号',
image: './../../../../images/fail.png'
})
return false
}
}
})
wxml代码:
<form bindsubmit='formSubmit'>
<view class='form'>
<text class='label'>姓名<text class='red'>(必填)</text></text>
<input class='int' name="name"></input>
<text class='label'>手机<text class='red'>(必填)</text></text>
<input class='int'name="phone" type="number" maxlength="11" bindinput="inputPhoneNum"></input>
<text class='label'>邮箱<text class='red'>(必填)</text></text>
<input class='int' name="email" bindchange="inputemail" ></input>
<text class='label' >单位<text class='red'>(必填)</text></text>
<input class='int' name="company" ></input>
<text class='label' >职务<text class='red'>(必填)</text></text>
<input class='int' name="job"></input>
</view>
<button class='submit' formType="submit" type="primary" >提交</button>
</form>
注解:
手机号为输入11个数字触发事件。
邮箱为失去焦点触发事件。
正则表达式/ /,格式注意。
---------------------
作者:Thea12138
来源:CSDN
原文:https://blog.csdn.net/Thea12138/article/details/80507133
版权声明:本文为博主原创文章,转载请附上博文链接!
微信小程序 --- 表单输入验证(手机号、邮箱验证、输入非空)的更多相关文章
- 微信小程序——表单验证插件WxValidate的二次封装(终极版)
微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...
- 微信小程序——表单验证插件WxValidate的二次封装(二)
在上一篇博客<微信小程序——仿jqueryValidate表单验证插件WxValidate的二次封装>中,我将WxValidate做了再次封装,简化了初始规则数据的构造,但是当有错误时页面 ...
- 微信小程序 - 表单验证插件WxValidate使用
插件下载地址及官方文档:https://github.com/skyvow/wx-extend 具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/w ...
- 微信小程序 - 表单验证插件WxValidate(自定义警告信息形式)
弹出的形式对于用户来说,总是不太友好的 可能会出现层级问题(只需要设置一下提示的层级即可) WxValidate内置规则 以下代码拷贝即可使用~ wxml <form bindsubmit='s ...
- 微信小程序-表单组件
button 按钮 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 示例代码: /** wxss **/ ...
- 微信小程序-表单
wxml <view> 按钮: <button size="{{buttom.size}}" type="{{buttom.type}}" p ...
- 微信小程序-表单笔记
发布页——向云端数据库上传多行文字和4张图片 第6,8行注释掉和不注释掉都可以实现数据上传 var _this = this; wx.cloud.callFunction({ name: 'searc ...
- 微信小程序-表单笔记2
本地添加4张图片并显示至页面——组件位置.设置样式.列表渲染 Q.button是一张图片,需要实现点击这张图片后选择本地图片后显示至页面,不知道怎么让本地图片将button挤到右边 S.在wxml中 ...
- 小程序 表单 获取 formId
微信小程序使用模板消息需要使用支付prepay_id或表单提交formId, 要获得 formId 需要在 form 标签中声明属性 report-submit="true" ...
随机推荐
- Python数据分析学习目录
python数据分析学习目录 Anaconda的安装和更新 矩阵NumPy pandas数据表 matplotlib-2D绘图库学习目录
- Java SE之浅谈JDK SDK JRE
JDK(Java Development Kit): 1.定义:编写Java程序的程序员使用的软件开发工具包,又被称为Java SDK (Java Software Development Kit ...
- luogu P4160 [SCOI2009]生日快乐
传送门 考虑因为每个人的蛋糕体积要相等,如果切了一刀,那么要使得分当前蛋糕的人根据分成的两部分蛋糕的体积分成两部分人,所以假设当前有n人,切的这一刀要是在x或y的\(\frac{k}{n}(k\in ...
- 关于apache 开启 ssl https 支持 TLS1.2 的些事
项目背景 需要搭建一个小程序的服务器,当然要使用https协议服务器windows service 2012 r2,后台语言是php,服务集成环境装的是appserv2.5 ,apache2.2证书申 ...
- D - 文理分科 HYSBZ - 3894(最小割)
题目链接:https://cn.vjudge.net/contest/281959#problem/D 题目大意:中文题目 具体思路: 首先说一下最小割:在最小代价的前提下,删除一些边之后,能够使得整 ...
- saltstack系列~第四篇
简介 针对mysql的sls编写0 软件包推送部分 tool_rsync: file.recurse: - source: salt://files/mysql ...
- 列式数据库~clickhouse 场景以及安装
一 简介:列式数据库clickhouse的安装与基本操作二 基本介绍:ClickHouse来自俄罗斯,是一款列式数据库三 适用场景: 简单类型的大数据统计四 限制 1 不支持更新操作,不支持事 ...
- 课程5:Spring框架2016版视频--视频列表目录
\day01视频\01-今天内容介绍.avi; \day01视频\02-spring的相关概念.avi; \day01视频\03-spring的ioc底层原理(一).avi; \day01视频\04- ...
- ActiveMQ集成Spring使用
现在任何一个框架的使用都会结合spring框架,quartz.cxf与平时常见的Hibernate.mybatis.Struts等都可以与spring集成起来使用,在这里研究了activemq结合sp ...
- PLSQL_day01
declare begin dbms_output.put_line('Hello world') end;