html5自带表单验证体验优化及提示气泡修改功能


Posted in HTML / CSS onSeptember 12, 2017

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("");
}

这样就完成了效果!

假如你觉得,这个自带的气泡也很难看!如下图: html5自带表单验证体验优化及提示气泡修改功能我想换掉!

在谷歌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 ] );
}

总结

以上所述是小编给大家介绍的html5自带表单验证体验优化及提示气泡修改功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
纯CSS3实现3D旋转书本效果
Mar 21 HTML / CSS
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 #HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 #HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 #HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 #HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 #HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 #HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 #HTML / CSS
You might like
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
基于mysql的论坛(7)
2006/10/09 PHP
discuz安全提问算法
2007/06/06 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
js DOM模型操作
2009/12/28 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
python机器学习之神经网络(三)
2017/12/20 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
Django跨域请求原理及实现代码
2020/11/14 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
优良学风班申请材料
2014/02/13 职场文书
计算机专业求职信
2014/06/02 职场文书
政府四风问题整改措施
2014/10/04 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis