小程序模板网

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

之前介绍过微信小程序wxs功能的相关知识:微信小程序:新功能WXS(2017.08.30新增)这里做了一个比较常用的实例:根据检测输入内容格式是否正确,来改变相关显示。 ... ...

 
 
 
 
之前介绍过微信小程序wxs功能的相关知识:微信小程序:新功能WXS(2017.08.30新增

 

这里做了一个比较常用的实例:根据检测输入内容格式是否正确,来改变相关显示。

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

 

			
  1. // 通过正则来检验邮箱是否有效
  2. var validateEmail = function(email) {
  3. 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,}))$')
  4. return reg.test(email)
  5. }
  6.  
  7. module.exports = {
  8. validateEmail: validateEmail
  9. }

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

 

			
  1.  
  2. src="../../src/wxs/common.wxs" module="util" />
  3.  
  4.  
  5. class="email_input {{util.validateEmail(email)?'':'error'}}" placeholder='请输入邮箱' value='{{email}}' bindinput='emailInput'>
  6.  
  7. class='button_wrapper'>
  8.  
  9. type='primary' disabled="{{util.validateEmail(email)?false:true}}" bindtap='confirmTap'>确定
  10.  

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

 

			
  1. Page({
  2. data: {
  3. email: ""
  4. },
  5. emailInput(e){
  6. let that = this
  7. let email = e.detail.value // 获取输入框的数据
  8. that.setData({
  9. email
  10. })
  11. },
  12. confirmTap(){
  13. let that = this
  14.  
  15. wx.showModal({
  16. title: '邮箱',
  17. content: that.data.email,
  18. showCancel:false
  19. })
  20. }
  21. })

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

 

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

结果:

测试机效果图  参考: 匹配邮箱正则相关:How to validate email address in JavaScript?

源代码:  Github:wechatapp-wxs-tutorial



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18327.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询