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

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('请输入正确的号码');" οninput="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; }

但是呢，这个方法后面被废弃掉了！你会发现修改气泡没有反应！那么怎么修改气泡样式呢？这里就稍微麻烦一些了！思路大概是我们先阻止默认气泡，然后创建新的气泡！

阻止默认气泡

submit

document.queryselector( "input" ).addeventlistener( "invalid",

function( event ) {

event.preventdefault();

});

创建新的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", "

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 += "

" +

label.innerhtml +

" " +

invalidfields[ i ].validationmessage +

"

";

}

// 把错误的信息放到错误容器里面

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自带表单验证体验优化及提示气泡修改功能，希望对大家有所帮助