微信小程序:使用wxs檢測郵箱格式實例

封面

之前介紹過微信小程序wxs功能的相關(guān)知識:微信小程序:新功能WXS(2017.08.30新增

這里做了一個比較常用的實例:根據(jù)檢測輸入內(nèi)容格式是否正確从祝,來改變相關(guān)顯示引谜。

工具函數(shù):
/src/wxs/common.wxs

// 通過正則來檢驗郵箱是否有效
var validateEmail = function(email) {
    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,}))$')
    return reg.test(email)
}

module.exports = {
    validateEmail: validateEmail
}

wxs引入到wxml中,設(shè)置module名為util呐赡,將data.email綁定到input中骏融,設(shè)置相應(yīng)的事件處理萌狂,并根據(jù)郵箱檢測結(jié)果改變相應(yīng)的class
/pages/checkEmail/checkEmail.wxml

<!-- 引入wxs,并設(shè)置module名 -->
<wxs src="../../src/wxs/common.wxs" module="util" />

<!-- 通過檢測郵箱是否有效误趴,來設(shè)置相應(yīng)的class务傲,再在wxss中寫好相應(yīng)的樣式 -->
<input class="email_input {{util.validateEmail(email)?'':'error'}}" placeholder='請輸入郵箱' value='{{email}}' bindinput='emailInput'></input>

<view class='button_wrapper'>
    <!-- 郵箱無效時枣申,禁用確定按鈕 -->
    <button type='primary' disabled="{{util.validateEmail(email)?false:true}}" bindtap='confirmTap'>確定</button>
</view>

頁面js中寫好相應(yīng)事件處理:輸入事件emailInput確定事件confirmTap
/pages/checkEmail/checkEmail.js

Page({
    data: {
        email: ""
    },
    emailInput(e){
        let that = this
        let email = e.detail.value // 獲取輸入框的數(shù)據(jù)
        that.setData({
            email
        })
    },
    confirmTap(){
        let that = this

        wx.showModal({
            title: '郵箱',
            content: that.data.email,
            showCancel:false
        })
    }
})

最后是樣式設(shè)置:
/pages/checkEmail/checkEmail.wxss

/* input */
.email_input {
    margin: 100rpx auto 0 auto;
    padding-left: 20rpx;
    padding-right: 20rpx;
    width: 400rpx;
    height: 76rpx;
    font-size: 28rpx;
    line-height: 76rpx;
    background: #F1F1F1;
    border-radius: 12rpx;
}
/* 無效郵箱樣式 */
.email_input.error {
    border: 2rpx solid red;
}

/* button */
.button_wrapper {
    margin: 50rpx auto 0 auto;
    width: 300rpx;
}

結(jié)果:


測試機效果圖

參考:
匹配郵箱正則相關(guān):How to validate email address in JavaScript?

源代碼:
Github:wechatapp-wxs-tutorial

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市楼雹,隨后出現(xiàn)的幾起案子贮缅,更是在濱河造成了極大的恐慌榨咐,老刑警劉巖谴供,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桂肌,死亡現(xiàn)場離奇詭異,居然都是意外死亡昌跌,警方通過查閱死者的電腦和手機照雁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來萍诱,“玉大人污呼,你說我怎么就攤上這事⊙嗫幔” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵饵蒂,是天一觀的道長酱讶。 經(jīng)常有香客問我,道長渊迁,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任毒租,我火速辦了婚禮漓骚,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蝌蹂。我一直安慰自己,他們只是感情好剃允,可當(dāng)我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布齐鲤。 她就那樣靜靜地躺著,像睡著了一般牡肉。 火紅的嫁衣襯著肌膚如雪淆九。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天饲窿,我揣著相機與錄音焕蹄,去河邊找鬼。 笑死腻脏,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的辽故。 我是一名探鬼主播腐碱,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼喂走!你這毒婦竟也來了谋作?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤帖池,失蹤者是張志新(化名)和其女友劉穎吭净,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體寂殉,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡友扰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了秽浇。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甚负。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖击喂,靈堂內(nèi)的尸體忽然破棺而出碰辅,到底是詐尸還是另有隱情,我是刑警寧澤没宾,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站铲敛,受9級特大地震影響会钝,放射性物質(zhì)發(fā)生泄漏工三。R本人自食惡果不足惜先鱼,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望掸读。 院中可真熱鬧宏多,春花似錦、人聲如沸伸但。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽函喉。三九已至,卻和暖如春管呵,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背账锹。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工坷襟, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人廓奕。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓档叔,卻偏偏與公主長得像,于是被迫代替她去往敵國和親衙四。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容