Django基于UserCreationForm的注册表单如何将弹窗校验错误改为行内展示

你观察到的两种展示形式，根源完全不同：

• 弹窗类提示：是浏览器内置的HTML5原生表单校验触发的效果，这类校验发生在请求发送到Django之前——只要输入框带有required必填标记、type="email"类型标记，浏览器就会在用户点提交时自动拦截请求，弹出系统风格的错误窗，根本不会把数据发给后端。
• 行内errorlist样式的提示：是Django后端接收到表单数据后，执行自定义校验规则返回的错误（比如密码过短、两次输入不匹配、用户名被占用），这类规则浏览器没有内置认知，必须要提交到后端才能拿到校验结果，自然会走你现有的行内展示逻辑。

核心操作：关闭浏览器原生校验 #

只需要给页面的<form>标签添加一个标准HTML属性novalidate，就能完全禁用浏览器的自动弹窗校验：
修改模板里的form标签为：

<form name='registration' method="POST" action="" novalidate>

添加该属性后，所有表单数据都会直接提交到Django后端执行校验，不管是字段必填校验、邮箱格式校验，还是其他自定义规则的校验，错误都会统一通过你现有模板里的{{form.xxx.errors}}渲染成统一样式的行内errorlist，和你现在已有的行内错误展示效果完全一致。

这个属性是W3C标准定义的通用属性，所有现代浏览器都完全兼容，也是Django官方推荐的自定义表单校验提示的标准用法。

顺带修正模板中影响功能的两处代码错误 #

结合你贴的模板代码，还有两个容易导致功能异常的细节问题，可以一并修正：

• 你当前模板中所有字段渲染都写的是reg_form.xxx，但从代码里{{ form.non_field_errors }}的写法可以判断，视图层传给模板的表单对象变量名是form，reg_form并未在模板上下文中定义，会导致所有输入框渲染失败。需要把所有的reg_form替换为form，比如将{{reg_form.email}}改为{{form.email}}。
• 提交按钮的写法<input type="submit" name="Create User">存在属性误用：带空格的name="Create User"会导致后端获取提交参数时出现解析异常，应改为<input type="submit" value="Create User">，将按钮展示文本通过value属性传入。

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