html中input文本框的内容不符合要求时的错误提示

方法一：后端的表单验证器，部分框架有现成的，不满足自己的需求时可自定义一个。如WTForms，点提交后才触发验证，如果有不合法的内容，会清空所有内容(包括合法的)，需全部重新输入一次。用户体验不如方法二。验证器里可以直接传入验证失败时的提示，即直接传入字符串。

方法二：前端Ajax验证，可设置文本框失去焦点时验证，是实时的验证，用户体验好。在要验证的输入框后添加span标签，用于显示验证是否成功的提示。

flask里一开始我的表单都是根据类渲染生成的，验证用的方法一。后来从bootstrap复制了一个表单，内容是邮箱，除了方法二的验证外，还查到一种方法，类似方法一。

<input type="email" class="form-control" id="new_email" name="new_email" placeholder="请输入新邮箱，并点击发送验证码" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" oninvalid="setCustomValidity('邮箱格式不正确');">
<!--这里正则开头结尾不能加/，加了后虽然实际邮箱正确但会匹配失败。提交时才触发oninvalid事件(同时我也另外写了Ajax验证)，也可以写在js里-->

这种方法的效果图，红字是Ajax验证的提示。

最后，又查到jQuery也可以实现这种验证，详情在参考链接3和4

参考链接1，参考链接2，参考链接3，参考链接4