表单验证 手机号输入框

最近有点时间抠了一些细节， 之前项目的表单验证比较奔放， 比如H5手机号输入框，可以输入文字， 移动端点击弹出来的键盘不是数字键盘， 今天找了点时间优化一下

先上最终效果

 

这里主要是做了两点

1、 input 的 pattern 属性配合样式进行同步提示， 在此处表现就是输入错误的时候输入框为红色， 正确的时候为绿色

2、还有就是直接限制不能输入字符，这一点可能途中提现不出来

优化过程

1、让移动端直接弹出数字键盘 

      将input 的  type='"tel" 我这里设置的是 tel ,当然也可以设置成 number或者 pattern="[0-9]*"  这里几点都无法满足全部要求

      type="number"  的时候 pattern="^1[3456789]\d{9}$" 无法生效， 不能配合css 做提示

2、限制输入字符

      这个就直接使用 watch 监听输入做正则截取 newValue.replace(/[^\d]/g, '').substring(0, 11)

代码

<input type="tel" v-model="form_01.input_04" 
pattern="^1[3456789]\d{9}$" required placeholder="请输入11位手机号">

 

watch: {
    'form_01.input_04': function (newValue, oldValue) {
      this.form_01.input_04 = newValue.replace(/[^\d]/g, '').substring(0, 11)
    }
  }

input,select{
          ...
          &:focus:valid{
            border-color: #77c25b; // 获取光标 内容判断合法提示的样式
          }
          &:focus:invalid{
            border-color: #ff1220; // 获取光标  内容判断不合法的样式
          }
        }

 这样的表单验证是比较友好的