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实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 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
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
PHP数组相关函数汇总
2015/03/24 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
jquery实现上传图片功能
2020/06/29 jQuery
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
python实现海螺图片的方法示例
2019/05/12 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
商务助理岗位职责
2013/11/13 职场文书
大学生入党思想汇报
2014/01/14 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
反四风对照检查材料
2014/09/22 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS