正则验证：手机号码验证

最新推荐文章于 2024-12-25 10:18:56 发布

原创最新推荐文章于 2024-12-25 10:18:56 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

该代码示例展示了如何使用HTML创建一个输入框用于输入手机号码，并结合JavaScript进行正则表达式验证。当用户离开输入框（onblur事件）时，程序会检查号码是否符合中国手机号码的一般格式（13-19位数字，以1开头），并根据验证结果更改提示文字的颜色。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       手机号码<input type="text" id="phone">
       <span id="cont" style="color: ;"></span>

       <script>
           phone.onblur=function(){
               // 获取输入框的值
               var str=phone.value
               console.log(str);
               // 正则验证
               var p=/^1[3-9]\d{9}$/
               var test=p.test(str)
               console.log(test);

               if(test){
                   cont.innerHTML='格式正确'
                   cont.style.color='green'
               }else{
                   cont.innerHTML='格式错误'
                   cont.style.color='red'
               }
           }
       </script>
   </body>
</html>