码迷,mamicode.com
首页 > 移动开发 > 详细

手机号码表单校验

时间:2020-10-16 10:59:28      阅读:36      评论:0      收藏:0      [点我收藏+]

标签:校验   表单   fun   inpu   nbsp   phone   号码   code   路径   

html

<input class="ipt space" placeholder="请输入您的手机号码" type="text" id="phone">
<p id="phone-wrong" class="form-checking">请输入正确的手机号码</p>

css

    .ipt-checking {
      background: #ffffff;
      border: 1px solid #ff0000;
    }
     .form-checking {
      font-size: 12px;
      color: #ff0000;
      line-height: 12px;
      display: none;
    }

js

<script src="/js/jquery-3.5.1.js"></script>
//根据自己存放路径引入jquery包
<script>
//手机号 失去焦点事件
        $(‘#phone‘).blur(function() {
            var reg = /^1[34578]\d{9}$/;
            if (!reg.test($("#phone").val())) {
                $("#phone").addClass(‘ipt-checking‘)
                $("#phone-wrong").css(‘display‘, ‘block‘)
            } else {
                $("#phone").removeClass(‘ipt-checking‘)
                $("#phone-wrong").css(‘display‘, ‘none‘)
            }
        })
</script>

 

手机号码表单校验

标签:校验   表单   fun   inpu   nbsp   phone   号码   code   路径   

原文地址:https://www.cnblogs.com/afafaa/p/13822196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!