慕课网之前录制的视频，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 ] );
}这里列举了一种方式，其实还有很多种方式！不过都大同小异，这里就不在举例了！
案例我这里就不列举了，具体到时候看一下我慕课网上的课程吧！谢谢大家！