之前介绍过微信小程序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