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 ] ); }
总结
以上所述是小编给大家介绍的html5自带表单验证体验优化及提示气泡修改功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月18日
2024年11月18日
- 群星《2022年度发烧天碟》无损黑胶碟 2CD[WAV+CUE][1.4G]
- 罗文1983-罗文甄妮-射雕英雄传(纯银AMCD)[WAV+CUE]
- 群星《亚洲故事香港纯弦》雨果UPMAGCD2024[低速原抓WAV+CUE]
- 群星《经典咏流传》限量1:1母盘直刻[低速原抓WAV+CUE]
- 庾澄庆1993《老实情歌》福茂唱片[WAV+CUE][1G]
- 许巍《在别处》美卡首版[WAV+CUE][1G]
- 林子祥《单手拍掌》华纳香港版[WAV+CUE][1G]
- 郑秀文.1997-我们的主题曲【华纳】【WAV+CUE】
- 群星.2001-生命因爱动听电影原创音乐AVCD【MEDIA】【WAV+CUE】
- 林志颖.1994-别了晴雨的回忆【飞碟】【WAV+CUE】
- 群星《经典咏流传2》限量1:1母盘直刻[低速原抓WAV+CUE]
- 【蓝卡唱片】卫海霞《乐海霞音珍藏版》WAV分轨
- 杨小琳《金装杨小琳》24K金碟特别版[低速原抓WAV+CUE]
- 群星《国风超有戏 第8期》[320K/MP3][30.32MB]
- 群星《国风超有戏 第8期》[FLAC/分轨][157.37MB]