手机号、验证码

作者: 小赵不在 | 来源:发表于2021-01-15 11:25 被阅读0次

手机号、验证码
短信验证码功能如何设计
短信验证模拟登录饿了么
Android 小技巧之 Login
PHP 短信验证码
flutter登陆机制
【产品流程】积木APP的注册功能
登录注册流程还原—「达目标」
测试
中国知网

手机号布局

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv_phone"
        android:text="手机号："
        android:textColor="@color/white"
        android:textSize="18dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toLeftOf="@id/et_phone"/>
    <EditText
        android:id="@+id/et_phone"
        android:layout_width="400dp"
        android:layout_height="wrap_content"
        android:onClick="click"
        android:hint="请输入11位手机号码"
        android:maxLength="13"
        android:phoneNumber="true"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/btn_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="click"
        android:text="验证码"
        app:layout_constraintLeft_toRightOf="@id/et_phone"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

手机号代码

class PhoneActivity : BaseActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_phone)

        var shouldAutoSplit = true

        et_phone.addTextChangedListener(object : LoginTextWatcher() {
            override fun afterTextChanged(s: Editable?) {
                //判断是删除还是输入(如果不加这个判断会在删除的时候出现bug，删到第九个数字的时候删除不了)
                if (!shouldAutoSplit) return
                if (s.toString().length == 13) {
                    btn_code.isEnabled = true
                }
                s.toString().length.also {
                    if (it == 3 || it == 8) {//在第三个、第八个数字之后加空格
                        // 123 4567
                        s?.append(' ')
                    }
                }
            }

            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
                shouldAutoSplit = count == 1
            }
        })
    }
    // 将123 3333 3333 变成 1233333333 有空格转成无空格
    private fun getPhoneNumber(editable: Editable): String {
        //创建一个新对象，用于操作editable对象的内容
        SpannableStringBuilder(editable.toString()).also {
            it.delete(3, 4)
            it.delete(7, 8)
            return it.toString()
        }
    }

    open class LoginTextWatcher : TextWatcher {
        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
        }

        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
            Log.v("onTextChanged", "s:${s.toString()} start:$start before:$before count:$count")
        }

        override fun afterTextChanged(s: Editable?) {
        }
    }

    fun click(v: View?) {
        when (v?.id) {
            R.id.iv_back -> finish()
            R.id.btn_code -> {
                if (et_phone.text.toString().length==13){
                val intent = Intent(this, CodeActivity::class.java)
                intent.putExtra("phone", getPhoneNumber(et_phone.text))
                startActivity(intent)
                }else{
                    btn_code.isEnabled = false
                    Toast.makeText(this,"请输入11位手机号", Toast.LENGTH_SHORT).show()
                }
            }
        }
    }
}

验证码布局

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/dimens_50dp"
        app:layout_constraintTop_toBottomOf="@id/tv_code_title"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        >

        <EditText
            android:id="@+id/input_et_text1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:inputType="number"
            android:lines="1"
            android:maxLength="1"
            android:textColor="@color/white"
            android:textSize="18sp" />

        <EditText
            android:id="@+id/input_et_text2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="25dp"
            android:gravity="center"
            android:inputType="number"
            android:lines="1"
            android:maxLength="1"
            android:textColor="@color/white"
            android:textSize="18sp" />

        <EditText
            android:id="@+id/input_et_text3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="25dp"
            android:gravity="center"
            android:inputType="number"
            android:lines="1"
            android:maxLength="1"
            android:textColor="@color/white"
            android:textSize="18sp" />

        <EditText
            android:id="@+id/input_et_text4"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="25dp"
            android:gravity="center"
            android:inputType="number"
            android:lines="1"
            android:maxLength="1"
            android:textColor="@color/white"
            android:textSize="18sp" />

    </LinearLayout>

验证码代码

public class CodeActivity extends BaseActivity {
    private EditText et_text1, et_text2, et_text3, et_text4;
    private ImageView iv_back;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_code);
        // 获取数据
        Intent intent = getIntent();
        intent.getStringExtra("phone");
        initView();
    }

    private void initView() {
        et_text1 = findViewById(R.id.input_et_text1);
        et_text2 = findViewById(R.id.input_et_text2);
        et_text3 = findViewById(R.id.input_et_text3);
        et_text4 = findViewById(R.id.input_et_text4);
        iv_back = findViewById(R.id.iv_back);
        et_text2.setEnabled(false);
        et_text3.setEnabled(false);
        et_text4.setEnabled(false);

        iv_back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        et_text1.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length() > 0) {
                    et_text2.setEnabled(true);
                    et_text1.clearFocus();
                    et_text2.requestFocus();
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {
                if (editable.length() > 0) {
                    et_text1.setEnabled(false);
                } else {
                    et_text1.setEnabled(true);
                    et_text2.setEnabled(false);
                }
            }
        });

        et_text2.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length() > 0) {
                    et_text3.setEnabled(true);
                    et_text2.clearFocus();
                    et_text3.requestFocus();
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {
                if (editable.length() > 0) {
                    et_text2.setEnabled(false);
                } else {
                    et_text2.setEnabled(true);
                    et_text3.setEnabled(false);
                }
            }
        });

        et_text3.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length() > 0) {
                    et_text4.setEnabled(true);
                    et_text3.clearFocus();
                    et_text4.requestFocus();
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {
                if (editable.length() > 0) {
                    et_text3.setEnabled(false);
                } else {
                    et_text3.setEnabled(true);
                    et_text4.setEnabled(false);
                }
            }
        });

        et_text4.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if (charSequence.length() > 0 && et_text1.getText().equals("1") && et_text2.getText().equals("2") && et_text3.getText().equals("3") && et_text4.getText().equals("4")) {
                    Toast.makeText(CodeActivity.this, "输入完成,验证码正确", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(CodeActivity.this, "验证码错误，请重新输入", Toast.LENGTH_SHORT).show();
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {
            }
        });

        et_text2.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View view, int i, KeyEvent keyEvent) {
                if (i == KeyEvent.KEYCODE_DEL && keyEvent.getAction() == KeyEvent.ACTION_DOWN) {
                    if (et_text2.getText().length() <= 0) {
                        et_text1.setEnabled(true);
                        et_text1.requestFocus();
                        et_text2.clearFocus();
                        et_text1.setText("");
                    }
                }
                return false;
            }
        });

        et_text3.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View view, int i, KeyEvent keyEvent) {
                if (i == KeyEvent.KEYCODE_DEL && keyEvent.getAction() == KeyEvent.ACTION_DOWN) {
                    if (et_text3.getText().length() <= 0) {
                        et_text2.setEnabled(true);
                        et_text2.requestFocus();
                        et_text3.clearFocus();
                        et_text2.setText("");
                    }
                }
                return false;
            }
        });

        et_text4.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View view, int i, KeyEvent keyEvent) {
                if (i == KeyEvent.KEYCODE_DEL && keyEvent.getAction() == KeyEvent.ACTION_DOWN) {
                    if (et_text4.getText().length() <= 0) {
                        et_text3.setEnabled(true);
                        et_text3.requestFocus();
                        et_text4.clearFocus();
                        et_text3.setText("");
                    }
                }
                return false;
            }
        });
    }
}