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