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

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

已解决selenium模块向网页input文本框输入内容失败问题
已解决(selenium向input文本框输入内容失败问题)selenium.common.exceptions.ElementNotInteractableException: Message: e ...
HTML中input文本框只读不可编辑的方法
方法1: οnfοcus=this.blur() 当鼠标放不上就离开焦点 <input type="text" name="input1" value=& ...
html中单选怎么写,Html中的文本框和单选按钮
Html中的文本框和单选按钮用来制作页面的登录注册使用.. HtmlDemo 用户名: 密码: 确认密码: 性别: 男女年龄: 下面是mycss.css部分 ------------------- ...
css合并两个文本框,css实现input文本框的双边框美化
css实现input文本框的双边框美化 .input_div{width:250px; height:22px; border-style:solid; border-width:1px 0 1px ...
php 修改input内容,JS简单获取并修改input文本框内容的方法示例
这篇文章主要介绍了JS简单获取并修改input文本框内容的方法,结合实例形式分析了JavaScript针对页面元素的获取.赋值等相关操作技巧,需要的朋友可以参考下本文实例讲述了JS简单获取并修改in ...
【超详总结/理解：正则表达式】特点/元字符/正则表达式中的标志位-flag/RegExp/重复操作与后向引用/匹配模式/表达邮箱/正则表达式对象的方法/利用正则表达式限制网页表单里的文本框输入内容
文章目录正则表达式: 正则表达式的用途正则表达式的组成-元字符正则表达式的特点正则表达式中的标志位-flag JavaScript中的正则表达式解析 RegExp 定义 RegExp RegE ...
html隐藏input边框线,html中去掉文本框(input type=text)的边框或只显示下边框
去掉: 只留下边框: CSS - input 只显示下边框 CSS 样式 : border:none; border-bottom: 1px solid #000 文本框input:text ...
vue input文本框中文字整体添加整体删除_揭秘神奇的PPT文本框，高手都喜欢这样的招数...
大家好,我是A君,分享越多,快乐越多. 是否对PPT中的文本框操作还是简单的输入文字呢?赶紧看看PPT高手是如何利用文本框轻松制作出高级PPT的. 01 使用文本框转换成SmartArt 有时候,我们 ...
将word文档中所有文本框中的内容转换成普通段落
某些pdf转word工具生成的word文档,会将很多内容放在文本框中,以至于编辑word文档不太方便,例如想全选所有段落中的文字再调整某些格式,文本框中的文字有时候不能像普通段落中的文字一样产生同样的 ...

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

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

最新文章

热门文章