第一個坑:沒有雙向綁定
用慣了vue之后,習慣了數據的雙向綁定,再用小程序,發現小程序采用"{{}}"這個符號,但是在輸入框輸入值的時候,並未改變data里面的屬性的值。而是要人為的使用this.setData({})方法給其賦值。
第二個坑:WeUI文檔簡潔
原生組件WeUI官方文檔寫的太過簡潔了,很多方法屬性都沒有例子,對於初學者來說的確不友好,且網上關於其資料也較少,這里以WeUI表單自定義驗證舉例子。
這一段是關於自定義驗證的描述,但是並未有任何demo演示。。。好吧,全靠自己摸索它的寫法。按照以前vue的思路,我是定義一個名字,然后在data中對該名字進行校驗,想着WeUI思路應該也是一樣。
這里以驗證,如果輸入的值為123,則驗證不通過吧。
wxml代碼與上篇文章一樣,這里改一下username的驗證地方。
在rules規則下面加一個validator的方法。寫法如下:
1 validator: (rule , value , params , models) => { 2 debugger 3 if (value === '123') { 4 return rule.message = '驗證123不通過'; 5 } else { 6 return rule.message = ''; 7 } 8 },
第一個參數rule表示的就是外層rules的驗證規則,目前有用的參數就只有message。
第二個參數value表示的是使用這個驗證組件的值。
第三個參數params目前沒用到。
第四個參數models表示的是在form中所有的實體對象。
在它自帶的form.js中有一段關於message的判斷如下所示
很簡潔,就是獲取剛剛的rule.message,有沒有值。這里可以看到它已經獲取到了。
而后如果有值,則表示驗證失敗,改變isFail的狀態返回給驗證消息。
從而實現一次完整的回調。
再看看界面輸出的內容。
嗯。。。是正確的結果,好了這就是關於表單自定義驗證的一些注意事項。