Flask环境下HTML页面IP验证不通过时如何阻止表单提交

问题根因 #

表单提交逻辑和Flask无关，是前端事件绑定错误导致的：你将校验函数绑定在提交按钮的onclick事件上，即便函数返回false，也不会阻止表单的默认提交行为。

解决方法 #

方案1：绑定校验到表单onsubmit事件（最简单适配） #

修改你的HTML代码，把校验逻辑移到form标签的onsubmit属性上，同时删除submit按钮的点击事件绑定：

<form name="ip_checks" method="post" enctype="multipart/form-data" onsubmit="return ValidateIPaddress(this.IPs)">
  <p><label for="ipaddresses" class="form-label">IP Addresses:</label>
  <textarea name="IPs" cols="40" rows="2" class="form-control"></textarea></p>
  <p><input type = "submit" value = "Submit" class = "btn btn-primary" /></p>
</form>

onsubmit事件返回false时会直接终止表单提交，符合你的校验需求。

方案2：正确使用preventDefault #

如果要使用preventDefault方法，需要将事件对象传入校验函数，修改后的代码如下：
JS代码：

function ValidateIPaddress(e, inputText) {
  var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
  if(inputText.value.match(ipformat)) {
    document.ip_checks.IPs.focus();
    return true;
  } else {
    e.preventDefault();
    alert("You have entered an invalid IP address!");
    document.ip_checks.IPs.focus();
    return false;
  }
} 

HTML的form标签修改为：

<form name="ip_checks" method="post" enctype="multipart/form-data" onsubmit="ValidateIPaddress(event, this.IPs)">

补充建议 #

前端校验可以被绕过，必须在Flask后端增加IP校验逻辑，示例代码如下：

import ipaddress
from flask import request, flash, redirect

@app.route('/your-route', methods=['POST'])
def handle_ip_submit():
    input_ip = request.form.get('IPs', '').strip()
    try:
        # 校验单个IPv4，如需校验多个可以先按换行/分隔符拆分后循环校验
        ipaddress.IPv4Address(input_ip)
    except ValueError:
        flash('输入的IP地址不合法')
        return redirect(request.url)
    # 合法IP的后续处理逻辑

如果你的textarea需要支持输入多个IP地址，需要同步修改前端正则和后端校验逻辑，适配多IP的分隔规则。

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