tips-2 数字&ip&端口正则表达式

最新推荐文章于 2022-11-11 14:36:11 发布

weixin_45698602

最新推荐文章于 2022-11-11 14:36:11 发布

阅读量143

点赞数

分类专栏： HTML js

本文链接：https://blog.youkuaiyun.com/weixin_45698602/article/details/118122498

版权

HTML 同时被 2 个专栏收录

14 篇文章

订阅专栏

9 篇文章

订阅专栏

这篇博客探讨了在前端开发中如何实现输入框的数字验证，利用JavaScript的oninput和onblur事件结合正则表达式，确保用户输入的是正整数。同时，文章提到了针对IP地址和端口号的正则验证，强调了验证在数据安全和用户体验中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input框中只能输入数字

<input type="text" id="setNumber" name="setNumber" lay-verify="required"
                  class="layui-input checknumber" placeholder="请输入正整数" oninput="checkNumber1()">

//oninput是边输入边验证 （IE有专属的onpropertychange属性，目前没有测试，所以不知道不写的话能不能运行）
//onblur是失去焦点后进行验证

function checkNumber1() {
      var inputNumber1 = document.getElementById("setNumber") //通过DOM对象获取文本框内容
      var textNumber1 = inputNumber1.value;
      if (!(/^[1-9]\d*$/).test(textNumber1)) { //只允许输入数字的正则表达式
        layer.msg("请输入正整数！", { icon: 2, time: 3000 }); //不符合则显示提示框（layui自带layer）
        $("#setNumber").val(""); //由于layui提交时有非空验证，所以设置如果输入内容不符合规则，清除内容
        inputNumber1.focus(); //文本框获取焦点
        return false;
      }
    }



/^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/
//IP正则表达式，因为IP中包含（.）,所以使用onblur在失去焦点后再对输入内容进行验证

/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
//端口号正则表达式