Android自定义EditText表单验证

对于EditText样式,网上都有好多各种方便的自定义控件。比如google的MaterialEditText库,继承EditText;

又或者像android-edittext-validator,大神们都已经封装好了的,直接拿过来用就可以。


但是,还不是我想要的,没办法,我们要的是更贴近现实项目的。先贴一下需求图;

需求图.png

其实也挺简单的,就是做的判断多一点;


1,布局;


布局拆分.png
我把EditText给拆分了下,比如背景看起来像底下只有一条线,其实我把background设为“@null”没有背景;右边的是个ImageView控件,底下是一个高为1px的View,View的下部分红框里是个未显示的提示语TextView,好吧,看下布局;
<LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:layout_marginTop="40px"
      android:paddingLeft="44px"
      android:paddingRight="44px"
      >
//输入框
      <EditText
          android:id="@+id/m_phone_edt"
          android:layout_width="0dp"
          android:layout_height="80px"
          android:background="@null"
          android:hint="请输入手机号"
          android:textSize="30px"
          android:textColorHint="#bcbcbc"
          android:layout_weight="8"
          android:paddingLeft="5px"
          />
//右边清除按钮
      <ImageView
          android:id="@+id/m_cancle"
          android:layout_width="70px"
          android:layout_height="70px"
          android:src="@mipmap/login_gb"
          android:layout_gravity="center"
          android:layout_marginLeft="-75px"
          android:padding="20px"
          android:visibility="gone"
          />
  </LinearLayout>
//底部线条
  <View
      android:id="@+id/m_phone_edt_bg"
      android:layout_width="match_parent"
      android:layout_height="1px"
      android:background="#d3d3d3"
      android:layout_marginLeft="44px"
      android:layout_marginRight="44px"
      />
//错误提示语
  <TextView
      android:id="@+id/m_phone_hint"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:textColor="#e40b12"
      android:text="请输入12位手机号码"
      android:textSize="25px"
      android:gravity="right"
      android:padding="6px"
      android:layout_marginRight="38px"
      android:visibility="invisible"
      />

这是一个EditText的布局,汗,,,,但是方便操作,可以实现自己想要的效果;

布局看完了,让我看看下代码。。同事写了个帮助方法,拿过来改了下,我们看一个手机号判定的方法把;

 /**
    * 
    * @param edit editText控件
    * @param hint 文字提示
    * @param phoneCancle  清除按钮
    * @param view  底下1px的线
    * @param listener 回调方法
    */
public void setPhoneListener(final EditText edit, final TextView hint , final ImageView phoneCancle,final View view, final EditPasswordListener listener){
     //第一个方法,监听焦点离开获得的方法
       edit.setOnFocusChangeListener(new View.OnFocusChangeListener() {
           @Override
           public void onFocusChange(View v, boolean hasFocus) {
               String editText = edit.getText().toString().trim();//拿到输入内容
               if(hasFocus && editText.length() == 0){
                   view.setBackgroundColor(0xffffe313);//如果获取焦点 并且没有内容 1px线条显示黄色选中状态
               }else if(!hasFocus) {
                   //如果输入内容为空,提示语隐藏,线为灰色,跳出方法
                   if(editText.equals("")){
                       hint.setVisibility(View.INVISIBLE);
                       view.setBackgroundColor(0xffd3d3d3);
                       return;
                   }
                    // 如果内容为空,不显示清除按钮 
                   if (editText.equals("")) {
                       phoneCancle.setVisibility(View.GONE);
                   } else {
                       phoneCancle.setVisibility(View.VISIBLE);
                   }
                   //手机号格式判定
                   if (WHelperUtil.isMobileRight(mContext, editText)) {
                       bool2 = true;
                   } else {
                       bool2 = false;
                   }
                   if (bool2) {
                       listener.isPasswordRight(true);//正确显示绿色的线条,提示语等
                       hint.setText("正确");
                       hint.setTextColor(0xff3CD21E);
                       hint.setVisibility(View.VISIBLE);
                       view.setBackgroundColor(0xff3CD21E);
                   } else if(!bool2 && editText.length()<11){
                       listener.isPasswordRight(false);//错误的显示红色的线条等。。。
                       hint.setText("请输入11位手机号码");
                       hint.setTextColor(0xffe40b12);
                       hint.setVisibility(View.VISIBLE);
                       view.setBackgroundColor(0xffe40b12);

                   }
               }
           }
       });
     //这个方法是实时监听内容变化的方法
       edit.addTextChangedListener(new TextWatcher() {
           @Override
           public void beforeTextChanged(CharSequence s, int start, int count, int after) {
           }

           @Override
           public void onTextChanged(CharSequence s, int start, int before, int count) {

           }

           @Override
           public void afterTextChanged(Editable s) {
               String editText = s.toString().trim();
               if (editText.equals("")) {
                   phoneCancle.setVisibility(View.GONE);
               } else {
                   phoneCancle.setVisibility(View.VISIBLE);
               }

               if (WHelperUtil.isMobileRight(mContext, editText)) {
                   bool2 = true;
               } else {
                   bool2 = false;
               }
               if (editText.equals("")) {
                   hint.setVisibility(View.INVISIBLE);
                   view.setBackgroundColor(0xffd3d3d3);
                   return;
               }
               if (bool2) {
                   listener.isPasswordRight(true);
                   hint.setText("正确");
                   hint.setTextColor(0xff3CD21E);
                   hint.setVisibility(View.VISIBLE);
                   view.setBackgroundColor(0xff3CD21E);
               } else if(!bool2 && editText.length()>11){
                   listener.isPasswordRight(false);
                   hint.setText("请输入11位手机号码");
                   hint.setTextColor(0xffe40b12);
                   hint.setVisibility(View.VISIBLE);
                   view.setBackgroundColor(0xffe40b12);
               }else if(!bool2 && editText.length()<11){
                   listener.isPasswordRight(false);
                   hint.setVisibility(View.INVISIBLE);
                   view.setBackgroundColor(0xffffe313);
               }
           }
       });
   }
写的很详细,大家应该能看的懂,最后在Activity中调用此方法;
   mLoginUtils = new LoginUtils(MainActivity.this);
       //手机号
       mLoginUtils.setPhoneListener(mPhoneEdt, mPhoneHint, mCancle, mPhoneEdtBg, new LoginUtils.EditPasswordListener() {
           @Override
           public void isPasswordRight(boolean bool) {
               mIsPhoneRight = bool;//拿到值
               isLogin();//判断登录按钮是否可点
           }
       });


private void isLogin() {
       //手机号,密码,验证码同时正确,可点击
       if (mIsPhoneRight && mIsPasswordRight && mIsCodeLook) {
           mGoLogin.setEnabled(true);//登录按钮可点
       } else {
           mGoLogin.setEnabled(false);
       }
   }

最右贴一个终极效果图;看看是不是你想要的效果 .

效果图.gif

当然 demo地址 <a>https://github.com/WKaKa/EditTextSample</a>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,702评论 22 664
  • 池上涟纹次第开, 千村万落衣青苔。 本是清清温柔色, 散入江河天际来。
    轩辕秋凰阅读 260评论 0 2
  • 昨天看到一句话:“你走了真好,不然总担心你要走。原来失去比拥有更踏实。” 感觉灵魂被击中了。 原句应该是说爱情的。...
    北北齐阅读 252评论 0 0
  • 一开始看见这个标题时,我是拒绝的。 可能是因为觉得世界这么美好,有这么个诱向趋导的内容,会有更多的人会变质。 但没...
    緹沫阅读 488评论 0 1