html5自定义required的提示文字

最新推荐文章于 2022-06-25 12:30:07 发布
最新推荐文章于 2022-06-25 12:30:07 发布
阅读量3.1w 收藏 9
点赞数 3
分类专栏： HTML5

<input type="text" required oninvalid="setCustomValidity('不能为空aaa')" οninput="setCustomValidity('')">

HTML5表单验证给前端开发带来许多便利，但是默认的提示不友好。我们可以通过setCustomValidity方法来自定义提示信息，更准确的提示给用户。

在用户输入的时候使用setCustomValidity('')将错误提示设置为空字符串，在输入不合法时用setCustomValidity('自定义提示信息')来替换提示信息，这样写会有些问题就是如果用户没有输入那么还是默认的提示信息，所以可以用任何方式获取到这个元素，然后调用它的setCustomValidity()方法先将提示信息设置为空字符串


丧心病狂大丧失
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5意见反馈提交表单页面模板特效代码
03-20
HTML5提供了`<input>`标签的各种类型，如`type="text"`，用于创建文本输入框，让用户自由输入文字。此外，还可以使用`<textarea>`标签创建多行文本输入区域，适合长篇幅的反馈内容。 图片上传预览是提高用户体验的...
HTML5+CSS3实现注册登录窗体特效代码
03-20
HTML5的`placeholder`属性则能为输入框提供提示文字，帮助用户理解应输入什么信息。 CSS3则是层叠样式表的最新版本，它极大地扩展了网页的样式和布局能力。在创建注册登录特效时，CSS3的伪类（如`:hover`, `:focus`...
vue 下input标签的required属性提示文字修改 （国际化问题）
april_4的博客
05-09 2万+
我觉得input框require的时候，浏览器给的那种提示还挺好的～个人见解～但是国际化又是个问题，网上一般给出的是这样的&lt;input type="text" required oninvalid="setCustomValidity('不能为空aaa')" oninput="setCustomValidity('')"&gt;但是里面的文字要国际化啊，试着用vue里面带的 $t("plac...
html5 required的提示文字自定义
键指江湖的博客
05-21 2828
在做一个纯英文网站时，遇到了表单验证，input未输入文字的时候，点击提交按钮 发现有一个提示框“请填写此字段”。 但是我需要改成英文的提示，于是网上搜答案 <input type=“text” required oninvalid=“setCustomValidity(‘不能为空xxxxxxx’)” οninput=“setCustomValidity(’’)”> 于是最拿手的复制粘贴， 结果input里面输入文本后不为空了，提示框里面文字确实是变了英文，但是发现点提交按钮还是会提示为空。 于
html html5 required自定义提示文本信息
芦小荟的博客 -- 芦慧芳
04-18 3264
oninvalid=“setCustomValidity(‘提示内容’)” ： 固定写法–>自定义提示内容 “setCustomValidity(’’)”： 固定写法–>清空上一次提交所输入的内容。 切记：oninput属性必须添加，否则input输入框无法检测再次输入的值，造成提醒信息多次弹出，并无法提交表单。 <form action="test.php" methods=...
html5 表单required样式修改,HTML5表单required验证修改文字和样式
weixin_29726381的博客
06-03 515
HTML5表单required验证修改文字和样式input[type="text"]{border:2px solid #ccc;}/*===包含required的表单===*//* 无效 */input:required:invalid{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAMA...
html5 required修改提示信息,required修改提示文字
weixin_39783857的博客
06-07 2609
input属性 requiredrequired 属性required 属性规定必须在提交之前填写输入域(不能为空,以提交表单)。除了 Internet Explorer 和 Safari，其他主流浏览器都支持 required 属性required 属性是一个布尔属性。required 属性是 HTML5 中的新属性。required 属性适用于以下类型的 标签：text, search, ur...
HTML5速查手册
10-21
同时，`<form>`标签支持`required`属性进行必填验证，`pattern`属性允许自定义输入格式，`placeholder`则可以设置输入框的提示文字。 在多媒体方面，HTML5引入了`<audio>`和`<video>`元素，可以直接在网页内嵌入...
html5 css3用户登录表单动画演示特效
11-11
HTML5还提供了一些新的属性，如`required`来确保必填项，`type="email"`或`type="password"`来指定特定类型的输入，以及`placeholder`来设置提示文本。 CSS3则在样式和动画方面起到了关键作用。我们可以用它来定义...
HTML5+CSS3炫酷的手机登陆界面
08-10
4. `placeholder` 属性：在输入框内显示提示文字，当用户聚焦输入框时会自动消失。 5. `required` 属性：确保用户必须填写该字段，否则无法提交表单。 6. `button` 元素：创建提交按钮，触发表单提交事件。 接着，...
HTML5表单验证required提示的中文设置为英文
前端和PHP学习
12-23 2844
默认提示是“请输入此字段” 只需要在后面加 上 oninvalid="setCustomValidity('Please enter your message!');" oninput="setCustomValidity('');" 就可实现提示英文。 千万要注意的时，如果不能正常使用，请在网页源代码中，看一下复制的代码是否正确，编码是否有错误。 上面代码也是在网上搜索到的，本人复制过...
miniui 文本验证提示
04-17 2077
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     文本提示                             .errorText     {         color:red;     }      
修改HTML Form required验证的样式与提示文字
carcarrot的博客
11-17 2145
先看下网上提供的方案： https://blog.csdn.net/web_xiaoling_notes/article/details/45920549 如果只是最简单的非空验证，如下代码可以解决： <input type="text" name="user_name" required oninvalid="setCustomValidity('不能为空')" oninput="setCustomValidity('')" /> 如果想更为复杂，更多逻辑判断，js代码不写到html
HTML5自定义表单验证错误提示信息
九天翔龙的技术博客
09-30 1万+
有如下HTML结构： &lt;form action="ok.html"&gt; &lt;input type="text" pattern="\d{1,3}" required id="myinput"&gt; &lt;p&gt; &lt;input type="submit" value="提交&quo
修改前端表单 require必填字段提示信息(请填写此字段)
lxp199741的博客
06-25 1917
require 提示信息修改 请填写此字段
HTML5表单required验证修改文字和样式
热门推荐
web_xiaoling_notes的博客
05-22 2万+
今天逛百度知道，回答问题，有人提问如何改变表单required的提示文字。慢慢研究开，发现除了非空外验证外，配合正则，HTML5的验证能力还是很强大的。不过转念一想，可否再美化一下，通过这个required判断来改变表单文本框的提示样式？搜了好久，国人都没写过，发现国外友人倒是写了，拿过来参考一下吧。 首先是改变提示文字。默认的文字是“请填写此字段”和“请匹配要求的格式”，如下图：
HTML input标签required自定义提示文本
tian_321go的博客
04-16 1万+
&lt;input type="text" placeholder="username..." required="required" oninvalid="setCustomValidity('username is empty')" oninput="setCustomValidity('')"&gt;切记：oninput属性必须添加，否则input输入框第一次为空后，第二次检测不到再次输
HTML5里的input标签的required属性提示文字修改
kakaxiD的博客
05-16 1万+
input 里面增加这样的语句： <input type="text" placeholder="您的姓名" required oninvalid="setCustomValidity('请输入您的姓名');" oninput="setCustomValidity('');" />
HTML5基础知识-HTML5表单.pptx
05-06
单元一 HTML5基础知识端基础前WebHTML5表单1表单元素2表单标记访问控制3HTML5新的input类型文本域textField 密码域Password field 单选按钮radioButton 复选框 checkBox下拉列表selcet多行文本框textArea按钮button1表单元素<form>表单元素<form>可以看作是一个包含许多表单控件的容器。action规定当提交表单时，向何处发送表单数据1表单元素<input><input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态：文本框复选框密码框单选按钮按钮……1表单元素-文本框文本框：允许用户输入单行的文本，这个控件常用来输入姓名、地址和电子邮件等，一般语法如下：<input type= "text" name= "文本框的名字" value= "默认的文本" size= "文本框的宽度" maxlength= "允许输入的最大字符数" required=“是否必须输入” placeholder=“占位符”……>1表单元素-文本框value =“…”文本框中将默认填充该文字

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值