找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序:使用wxs检测邮箱格式实例

[复制链接]
查看: 205|回复: 4
最佳答案
0 

2

主题

3

帖子

78

积分

新人求带

积分
78
 楼主| 发表于 7 天前 | 显示全部楼层 |阅读模式
91c032b00.png
这里做了一个比较常用的实例:根据检测输入内容格式是否正确,来改变相关显示。

工具函数:
  1. /src/wxs/common.wxs

  2. // 通过正则来检验邮箱是否有效
  3. var validateEmail = function(email) {
  4.     var reg = getRegExp('^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))
  5. 将wxs引入到wxml中,设置module名为util,将data.email绑定到input中,设置相应的事件处理,并根据邮箱检测结果改变相应的class:
  6. [code]/pages/checkEmail/checkEmail.wxml

  7. <!-- 引入wxs,并设置module名 -->
  8. <wxs src="../../src/wxs/common.wxs" module="util" />

  9. <!-- 通过检测邮箱是否有效,来设置相应的class,再在wxss中写好相应的样式 -->
  10. <input class="email_input {{util.validateEmail(email)?'':'error'}}" placeholder='请输入邮箱' value='{{email}}' bindinput='emailInput'></input>

  11. <view class='button_wrapper'>
  12.     <!-- 邮箱无效时,禁用确定按钮 -->
  13.     <button type='primary' disabled="{{util.validateEmail(email)?false:true}}" bindtap='confirmTap'>确定</button>
  14. </view>
复制代码

页面js中写好相应事件处理:输入事件emailInput 和 确定事件confirmTap:
  1. /pages/checkEmail/checkEmail.js

  2. Page({
  3.     data: {
  4.         email: ""
  5.     },
  6.     emailInput(e){
  7.         let that = this
  8.         let email = e.detail.value // 获取输入框的数据
  9.         that.setData({
  10.             email
  11.         })
  12.     },
  13.     confirmTap(){
  14.         let that = this

  15.         wx.showModal({
  16.             title: '邮箱',
  17.             content: that.data.email,
  18.             showCancel:false
  19.         })
  20.     }
  21. })
复制代码

最后是样式设置:
  1. /pages/checkEmail/checkEmail.wxss

  2. /* input */
  3. .email_input {
  4.     margin: 100rpx auto 0 auto;
  5.     padding-left: 20rpx;
  6.     padding-right: 20rpx;
  7.     width: 400rpx;
  8.     height: 76rpx;
  9.     font-size: 28rpx;
  10.     line-height: 76rpx;
  11.     background: #F1F1F1;
  12.     border-radius: 12rpx;
  13. }
  14. /* 无效邮箱样式 */
  15. .email_input.error {
  16.     border: 2rpx solid red;
  17. }

  18. /* button */
  19. .button_wrapper {
  20.     margin: 50rpx auto 0 auto;
  21.     width: 300rpx;
  22. }
复制代码

结果:
2158535-50d10f5e7907827c.gif
测试机效果图

参考:
匹配邮箱正则相关:How to validate email address in JavaScript?

源代码:
Github:wechatapp-wxs-tutorial

作者:tomfriwel
链接:http://www.jianshu.com/p/05196ed2dc96
)
    return reg.test(email)
}

module.exports = {
    validateEmail: validateEmail
}[/code]
将wxs引入到wxml中,设置module名为util,将data.email绑定到input中,设置相应的事件处理,并根据邮箱检测结果改变相应的class:
  1. /pages/checkEmail/checkEmail.js

  2. Page({
  3.     data: {
  4.         email: ""
  5.     },
  6.     emailInput(e){
  7.         let that = this
  8.         let email = e.detail.value // 获取输入框的数据
  9.         that.setData({
  10.             email
  11.         })
  12.     },
  13.     confirmTap(){
  14.         let that = this

  15.         wx.showModal({
  16.             title: '邮箱',
  17.             content: that.data.email,
  18.             showCancel:false
  19.         })
  20.     }
  21. })
复制代码

页面js中写好相应事件处理:输入事件emailInput 和 确定事件confirmTap:
  1. /pages/checkEmail/checkEmail.wxss

  2. /* input */
  3. .email_input {
  4.     margin: 100rpx auto 0 auto;
  5.     padding-left: 20rpx;
  6.     padding-right: 20rpx;
  7.     width: 400rpx;
  8.     height: 76rpx;
  9.     font-size: 28rpx;
  10.     line-height: 76rpx;
  11.     background: #F1F1F1;
  12.     border-radius: 12rpx;
  13. }
  14. /* 无效邮箱样式 */
  15. .email_input.error {
  16.     border: 2rpx solid red;
  17. }

  18. /* button */
  19. .button_wrapper {
  20.     margin: 50rpx auto 0 auto;
  21.     width: 300rpx;
  22. }
复制代码

最后是样式设置:
[        DISCUZ_CODE_3        ]
结果:

测试机效果图

参考:
匹配邮箱正则相关:How to validate email address in JavaScript?

源代码:
Github:wechatapp-wxs-tutorial

作者:tomfriwel
链接:http://www.jianshu.com/p/05196ed2dc96
回复

使用道具 举报

最佳答案
0 

0

主题

259

帖子

2103

积分

专家路上

积分
2103
发表于 6 天前 | 显示全部楼层
學習了,謝謝分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

44

帖子

49

积分

新人求带

积分
49
发表于 6 天前 | 显示全部楼层
那我看看,路过
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

99

帖子

552

积分

略知一二

积分
552
发表于 6 天前 | 显示全部楼层
感谢楼主分享
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

175

帖子

822

积分

专家路上

积分
822
发表于 6 天前 | 显示全部楼层
:L:L
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com