Laravel项目中HTML IP地址输入文本字段正确写法及替代方案

原有代码的问题 #

贴出的代码无法正常运行，核心问题有3个：

• 标签结构不符合规范：<label>的for属性指向了不存在的元素ID，且把输入框直接嵌套在label内部、缺失字段说明文本，会导致点击聚焦、读屏器识别失效
• 校验提示缺失：配置了IP格式正则pattern但没有配套title属性说明规则，用户触发校验失败时无法获知正确输入要求
• 冗余样式定义：重复声明全断点下的3列宽度，基于Bootstrap的栅格规则，col-3已经覆盖所有尺寸断点的3列宽度，无需重复写col-xs-3/col-sm-3等同效类

原生标准单输入框正确写法 #

兼容所有主流浏览器的IPv4文本录入字段写法如下，直接替换原有代码即可正常运行：

<div class="col-3">
    <div class="form-group">
        <label for="ip_input" class="form-label text-truncate col-9">IP地址</label>
        <input 
            type="text"
            id="ip_input"
            class="form-control"
            name="xproject"
            required
            pattern="^((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)$"
            title="请输入合法IPv4地址，格式为xxx.xxx.xxx.xxx，每段数值范围0-255"
            placeholder="例：192.168.1.1"
        >
    </div>
</div>

说明：上述正则默认禁止每段地址出现无意义前导零（比如01.01.01.01会判定为非法），如果业务允许前导零，把正则替换为原有代码中的正则即可。

可替代的实现方案 #

如果单输入框的方案不符合业务需求，可以选择以下几种更稳定、体验更好的实现方式：

• 分段式输入方案：拆分为4个最大输入长度为3的数字输入框，中间用.分隔，配合少量JS实现输完一段自动跳转到下一个输入框，从交互层面避免用户输错分隔符、输多位数的问题，校验逻辑也更简单
• 输入掩码方案：给输入框绑定IP格式输入掩码，用户输入时自动补充分隔符、过滤非数字字符，实时限制输入范围，不需要用户手动输入点分隔符，输入效率更高
• Laravel后端校验兜底：所有前端校验都可以被绕过，必须在Laravel的表单验证规则中添加'xproject' => 'required|ip'，框架自带的IP校验规则同时支持IPv4/IPv6格式，严谨性远高于前端正则，可以兜底所有非法输入
• 原生IPv6兼容方案：如果需要同时支持IPv6地址录入，把正则替换为IPv6匹配规则，或者直接去掉前端正则，完全靠后端ip规则校验即可

内容的提问来源于stack exchange，提问作者retorado001