html气泡表单验证,h5自带表单默认气泡修改

.oneline {

line-height: 1.5;

margin: 10px auto;

}

.oneline label {

width: 100px;

text-indent: 15px;

font-size: 14px;

font-family: "Microsoft Yahei";

display: inline-block;

}

.oneline .sinput {

width: 60%;

height: 30px;

border-radius: 6px;

border: 1px solid #e2e2e2;

}

.oneline input[type="submit"] {

margin-left: 20px;

width: 80px;

height: 30px;

border: 0;

background-color: #5899d0;

color: #fff;

font-size: 14px;

border-radius: 6px;

}

.error-messages {

color: red;

}

用户名:

Email:

function replaceValidationUI(form) {

form.addEventListener("invalid", function(event) {

event.preventDefault();

}, true);

form.addEventListener("submit", function(event) {

if (!this.checkValidity()) {

event.preventDefault();

}

},true);

//此处写代码

var afterB = document.getElementById(‘forms‘);

afterB.addEventListener(‘click‘ , function(event){

var inValidAll = form.querySelectorAll(‘:invalid‘), //获取所有不符合验证的信息

errorAll = form.querySelectorAll(‘.error-messages‘), //获取所有错误的信息

after;

for(var i = 0;i

after = inValidAll[i].parentNode;

afterB.insertAdjacentHTML(‘afterbegin‘,‘

• 用户名：‘+inValidAll[i].validationMessage+‘

‘);

}

if (inValidAll.length > 0) {

inValidAll[0].focus();

}

for(var i = 0;i

errorAll[i].parentNode.removeChild(errorAll[i])

}

})

}

var forms = document.getElementById("forms");

replaceValidationUI(forms);

原文：https://www.cnblogs.com/jian1234/p/9835359.html