input边写边验证？正则表达式写在属性里？小技巧

首先，我们需要一个input，后面的span用来存放验证信息，

<input type="tel" placeholder="电话号码" maxlength="11" required="required"  pattern="^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$" /><span class="validity"></span>

这是常用的电话号码验证，然后写样式

input + span {
              padding-right: 30px;
              white-space: nowrap;
              font-size: 20px;
            }
            
            input:invalid+span:after {
              position: absolute; content: '请输入正确的手机号!';
              padding-left: 5px;
              color: #8b0000;
            }
            
            input:valid+span:after {
              position: absolute;
              content: '✓';
              padding-left: 5px;
              color: #009000;
            }

然后，丑陋无比的效果图如下：

 

转载于:https://www.cnblogs.com/azure-zero/p/11506658.html