[H5表单]html5自带表单验证体验优化及提示气泡修改
慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了。还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程。今天就稍微说一下表单验证!另外,有网友建议我录制一些关于vue的视频。一是由于vue我本身用的也不多,二是视频网站暂时没有让我录制的需求。因此,后面有时间我再准备此方面的课程!
下面说下正题,html5表单验证方便的知识,我之前也写过!大家请看http://www.haorooms.com/post/html5_form_zs 今天呢,在写写其再带验证方面的东东!
html5自带表单验证
很多朋友进行表单验证的时候,都是自己用jquery或者js手工验证,或者用一下jquery插件进行验证。因为大家觉得html5自带验证不是很好!其实,现在html5自带表单验证,目前已经蛮强大了。我们来看下我用纯html5写的一个表单验证吧!体验一下!
大家觉得这个效果怎么样呢?
这个效果的精华是加了三个图片!
.myform select:required,
.myform input:required,
.myform textarea:required {
background: #fff url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/star.jpg) no-repeat 99% center;
}
.myform select:required:valid,
.myform input:required:valid,
.myform textarea:required:valid {
background: #fff url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/right.png) no-repeat 99% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.myform select:focus:invalid,
.myform input:focus:invalid,
.myform textarea:focus:invalid {
background: #fff url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/error.png) no-repeat 99% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
然后做了一个监听事件:
oninvalid="this.setCustomValidity('请输入正确的号码');" oninput="setCustomValidity('')"
验证密码是否一致的时候,用了一个js
function checkPassword() {
var pass1 = document.getElementById("Password");
var pass2 = document.getElementById("Repassword");
if (pass1.value != pass2.value)
pass2.setCustomValidity("两次输入的密码不匹配");
else
pass2.setCustomValidity("");
}
这样就完成了效果!
假如你觉得,这个自带的气泡也很难看!如下图: 我想换掉!
在谷歌29之前的版本,我们是可以用伪元素来修改气泡!
::-webkit-validation-bubble { min-width:152px; margin-top: -1px;}
::-webkit-validation-bubble-arrow { border: 1px solid #F7CE39; background: #FFFBC7; /* position:relative; */ top: 4px; left: 0px; }
::-webkit-validation-bubble-arrow-clipper { text-align: center; }
::-webkit-validation-bubble-heading { color: #444; }
::-webkit-validation-bubble-message { border: 1px solid #F7CE39; background: #FFFBC7; border-radius: 3px; }
::-webkit-validation-bubble-text-block { font-size: 12px; }
但是呢,这个方法后面被废弃掉了!你会发现修改气泡没有反应!那么怎么修改气泡样式呢?这里就稍微麻烦一些了!思路大概是我们先阻止默认气泡,然后创建新的气泡!
阻止默认气泡
<form>
<input required>
<button>Submit</button>
</form>
<script>
document.querySelector( "input" ).addEventListener( "invalid",
function( event ) {
event.preventDefault();
});
</script>
创建新的UI
代码大致如下:
function replaceValidationUI( form ) {
//阻止气泡
form.addEventListener( "invalid", function( event ) {
event.preventDefault();
}, true );
// 支持Safari, iOS Safari, Android 浏览器
// 默认提交表格
form.addEventListener( "submit", function( event ) {
if ( !this.checkValidity() ) {
event.preventDefault();
}
});
// 新增错误提示的容器
form.insertAdjacentHTML( "afterbegin", "<ul class='error-messages'></ul>" );
var submitButton = form.querySelector( "button:not([type=button]), input[type=submit]" );
submitButton.addEventListener( "click", function( event ) {
var invalidFields = form.querySelectorAll( ":invalid" ),
listHtml = "",
errorMessages = form.querySelector( ".error-messages" ),
label;
for ( var i = 0; i < invalidFields.length; i++ ) {
label = form.querySelector( "label[for=" + invalidFields[ i ].id + "]" );
listHtml += "<li>" +
label.innerHTML +
" " +
invalidFields[ i ].validationMessage +
"</li>";
}
// 把错误的信息放到错误容器里面
errorMessages.innerHTML = listHtml;
// 给第一个错误的input选中
// 错误信息容器显示
if ( invalidFields.length > 0 ) {
invalidFields[ 0 ].focus();
errorMessages.style.display = "block";
}
});
}
// 替换form中所有的验证UI
var forms = document.querySelectorAll( "form" );
for ( var i = 0; i < forms.length; i++ ) {
replaceValidationUI( forms[ i ] );
}
这里列举了一种方式,其实还有很多种方式!不过都大同小异,这里就不在举例了!
案例我这里就不列举了,具体到时候看一下我慕课网上的课程吧!谢谢大家!
[H5表单]html5自带表单验证体验优化及提示气泡修改的更多相关文章
- html5自带表单验证
起因:今天无意中发现chrome的input框自带表单验证!于是就去试试firefox,惊奇的发现也有自带的验证提示,只不过两者的样式不一样 chrome中的样子: firefox中的样子: 发散:具 ...
- Python与数据结构[0] -> 链表/LinkedList[0] -> 单链表与带表头单链表的 Python 实现
单链表 / Linked List 目录 单链表 带表头单链表 链表是一种基本的线性数据结构,在C语言中,这种数据结构通过指针实现,由于存储空间不要求连续性,因此插入和删除操作将变得十分快速.下面将利 ...
- html5自带表单验证-美化改造
神奇的代码 暂且叫做html5.css /* === HTML5 validation styles === */ .myform select:required, .myform input:req ...
- 用html5自带表单验证 并且用ajax提交的解决方法(附例子)
用submit来提交表单,然后在js中监听submit方法,用ajax提交表单最后阻止submit的自动提交. 在标准浏览器中,阻止浏览器默认行为使用event.preventDefault(),而在 ...
- H5自带表单验证
HTML5自带的表单验证 转载:https://www.web-tinker.com/article/20781.html HTML5对表单元素提供了patern属性,它接受一个正则表达式.表单提交时 ...
- 10款精美的HTML5表单登录联系和搜索表单
1.HTML5/CSS3仿Facebook登录表单 这款纯CSS3发光登录表单更是绚丽多彩.今天我们要分享一款仿Facebook的登录表单,无论从外观还是功能上说,这款登录表单还是挺接近Faceboo ...
- html5中form表单新增属性以及改良的input标签元素的种类
在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...
- HTML5的form表单属性
form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...
- HTML5跨浏览器表单及HTML5表单的渐进增强
HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...
随机推荐
- c#设计模式系列:命令模式(Command Pattern)
引言 命令模式,我感觉"命令"就是任务,执行了命令就完成了一个任务.或者说,命令是任务,我们再从这个名字上并不知道命令的发出者和接受者分别是谁,为什么呢?因为我们并不关心他们是谁, ...
- 微信开发之c#下缓存jssdk的access_token
因为access_token的寿命只有7200秒,每日获取access_token存在上限,所以在获取access_token后,需要将其缓存起来. 首先建立一个模型 public class Acc ...
- Office 2019 官方镜像下载地址
http://officecdn.microsoft.com/pr/492350f6-3a01-4f97-b9c0-c7c6ddf67d60/media/zh-cn/ProPlus2019Retail ...
- WinForm使用Label控件模拟分割线(竖向)
用Label控件进行模拟 宽度设为1:this.lblPagerSpliter1.Size = new System.Drawing.Size(1, 21); 去掉边框:this.lblPagerSp ...
- Jquery 【on事件】
一.on事件的定义和用法 on() 方法在被选元素及子元素上添加一个或多个事件处理程序. 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() 方 ...
- ubantu18.04 配置nginx与uwsgi
一.首先先安装nginx静态服务 先更新 sudo apt-get update 1.安装gcc g++的依赖库 sudo apt-get install build-essential && ...
- Python3.4程序异常判断
实例代码[更多实例,请访问:www.yeayee.com] 1 #idle中按F5可以运行代码 2 #引入外部模块 import xxx 3 #random模块,randint(开始数,结束数) 产生 ...
- 关于导入本地maven项目pom.xml出现missing artifact org....报错处理
一.导入本地maven项目步骤:
- rm: cannot remove `xxx’: Operation not permitted问题的处理方案
第一步:22.txt lsattr 22.txt 查看文件属性 看到的情况 -----a------- 第二步:去除a的属性 chattr -a 22.txt 第三步:在此执行删除 rm 22.txt
- [USACO19FEB]Cow Dating
Luogu5242 通过观察数据,我们可以发现,右端点的取值是单调递增的.于是,我们可以极限一波,用一个双指针法,类似于队列. 右端点的取值满足以下公式: (1-p1)(1-p2)..(1-pn) * ...