使用DataBinding來驗證表單

寫在前面

在平時的開發(fā)中梅掠,處理表單也是需要注意的檻酌住。
開發(fā)者一般都會有自己的一套處理表單的方法店归,以前都會自己手動添加textChangeListener,到后來會通過Rxjava亦或者更直接的Rxbinding來處理,可以參考鏈接RxJava處理復(fù)雜表單驗證問題赂韵。

當然還有一些表單驗證的庫娱节。

這些都是大家熟知的事情,不多談祭示,本文主要探討另外一種處理表單的方法肄满。

使用DataDinding來處理表單驗證問題

關(guān)于DataBinding前幾篇就有介紹,不了解的可以搜索一下质涛,easy稠歉。

處理表單驗證,關(guān)鍵是需要獲取到填充的數(shù)據(jù)汇陆,然后驗證格式是否正確怒炸,平常都是根據(jù)textChangeListener,而dataBinding可以使用雙向綁定輕松拿到。

<AutoCompleteTextView
    android:id="@+id/username"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/prompt_username"
    android:inputType="text"
    android:maxLines="1"
    android:text="@={vm.username}"/>

接下來是驗證

    public static final String PASSWORD_PATTERN = "^[a-zA-Z0-9_]{6,16}$";
    public static final String USERNAME_PATTERN = "^[a-zA-Z0-9_]{6,16}$";
    private static final String EMAIL_PATTERN =
            "^[a-zA-Z0-9#_~!$&'()*+,;=:.\"(),:;<>@\\[\\]\\\\]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*$";

    private String username = "";
    private String email = "";
    private String password = "";
    private Pattern usernamePattern = Pattern.compile(USERNAME_PATTERN);
    private Pattern emailPattern = Pattern.compile(EMAIL_PATTERN);
    private Pattern passwordPattern = Pattern.compile(PASSWORD_PATTERN);
  
    @Bindable({"username", "password", "email"})
    public boolean isBtnEnabled() {
        if (!usernamePattern.matcher(username).matches()||              !emailPattern.matcher(email).matches()
                || !passwordPattern.matcher(password).matches()) {
            return false;
        }
        return true;
    }

使用正則表達式來驗證格式是否正確

isBtnEnabled()用來判斷按鈕是否可點擊

@Bindable({"username", "password", "email"})是databinding的Dependent Properties毡代,在"username", "password", "email"這幾個值改變的時候通知isBtnEnabled()方法返回更新的值阅羹,具體可以參考前面的文章【譯】Android Data Binding: Dependent Properties

效果如下:

SingleMode.gif
SingleMode.gif

錯誤處理

在點擊Sign In 后 教寂,可能登錄失敗捏鱼,提示用戶名或者密碼錯誤,需要通過setError()方法來提示用戶酪耕。不過TextInputLayout不是那么智能导梆,具體見使用TextInputLayout創(chuàng)建一個登陸界面 ,可能需要大量的無用的代碼迂烁。

public void onClick(View v) {
    hideKeyboard();
 
    String username = usernameWrapper.getEditText().getText().toString();
    String password = usernameWrapper.getEditText().getText().toString();
    if (!validateEmail(username)) {
        usernameWrapper.setError("Not a valid email address!");
    } else if (!validatePassword(password)) {
        passwordWrapper.setError("Not a valid password!");
    } else {
        usernameWrapper.setErrorEnabled(false);
        passwordWrapper.setErrorEnabled(false);
        doLogin();
    }
}

而使用Databinding我們不必需要寫這么多格式化的無用代碼看尼,直接在xml里設(shè)置就好了。

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:error="@{vm.usernameError}"
        app:errorEnabled="@{vm.usernameInValid}"
        app:errorTextAppearance="@color/login_error">

    <AutoCompleteTextView
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/prompt_username"
            android:inputType="text"
            android:maxLines="1"
            android:text="@={vm.username}"/>

</android.support.design.widget.TextInputLayout>

TextInputLayoutsetErrorsetErrorEnabled兩個方法盟步,我們只需要改變viewmodel里的值藏斩,就可以達到相應(yīng)的效果。

    private String usernameError = "";
    private String passwordError = "";
    private String emailError = "";

    //get set method
    @Bindable("usernameError")
    public boolean isUsernameInValid() {
        return !isEmpty(usernameError);
    }

    @Bindable("emailError")
    public boolean isEmailInValid() {
        return !isEmpty(emailError);
    }

    @Bindable("passwordError")
    public boolean isPasswordInValid() {
        return !isEmpty(passwordError);
    }

    //···

看看效果:

error.gif
error.gif

寫在最后

處理表單平常還是用rxjava 用的比較多却盘,前幾天發(fā)現(xiàn)databinding處理也很簡單灾茁,相信databinding還會有更多很贊的地方等待大家發(fā)掘。

githud地址:https://github.com/ditclear/BaseViewBinding/tree/master/app/src/main/java/com/ditclear/app/validate

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谷炸,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子禀挫,更是在濱河造成了極大的恐慌旬陡,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件语婴,死亡現(xiàn)場離奇詭異描孟,居然都是意外死亡驶睦,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進店門匿醒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來场航,“玉大人,你說我怎么就攤上這事廉羔「攘。” “怎么了?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵憋他,是天一觀的道長孩饼。 經(jīng)常有香客問我,道長竹挡,這世上最難降的妖魔是什么镀娶? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮揪罕,結(jié)果婚禮上梯码,老公的妹妹穿的比我還像新娘。我一直安慰自己好啰,他們只是感情好轩娶,可當我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著坎怪,像睡著了一般罢坝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上搅窿,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天嘁酿,我揣著相機與錄音,去河邊找鬼男应。 笑死闹司,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的沐飘。 我是一名探鬼主播游桩,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼耐朴!你這毒婦竟也來了借卧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤筛峭,失蹤者是張志新(化名)和其女友劉穎铐刘,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體影晓,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡镰吵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年檩禾,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片疤祭。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡盼产,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出勺馆,到底是詐尸還是另有隱情戏售,我是刑警寧澤,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布谓传,位于F島的核電站蜈项,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏续挟。R本人自食惡果不足惜紧卒,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望诗祸。 院中可真熱鬧跑芳,春花似錦、人聲如沸直颅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽功偿。三九已至盆佣,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間械荷,已是汗流浹背共耍。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留吨瞎,地道東北人痹兜。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像颤诀,于是被迫代替她去往敵國和親字旭。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,941評論 2 355

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,139評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理崖叫,服務(wù)發(fā)現(xiàn)遗淳,斷路器,智...
    卡卡羅2017閱讀 134,657評論 18 139
  • HTML表單 在HTML中心傀,表單是 ... 之間元素的集合洲脂,它們允許訪問者輸入文本、選擇選項、操作對象等等恐锦,然后將...
    蘭山小亭閱讀 3,418評論 2 14
  • Angular 支持非常強大的內(nèi)置表單驗證,maxlength疆液、minlength一铅、required 以及 pat...
    sunny_lvy閱讀 19,991評論 3 25
  • 一登上盛世公主號游輪,我就收到一本兒童俱樂部的護照堕油,護照上面有許多的任務(wù)潘飘,其中有一項任務(wù)就是在船上找到不同國...
    萌祺祺kiki閱讀 388評論 0 1