这样写的效果实现不了这是为什么呢
来源：4-15 编程练习
qq_青空_4
2017-10-04 20:43:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.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;
}
</style>
<body>
<form id="forms">
<div class="oneline">
<label for="name">用户名:</label>
<input id="name" class="sinput" name="name" type="text" onfocus="checkit(this)" required>
</div>
<div class="oneline">
<label for="email">Email:</label>
<input id="email" class="sinput" name="email" type="email" onfocus="checkEmail(this)">
</div>
<div class="oneline">
<input type="submit" id="submits" value="提交">
</div>
</form>
<script>
function checkit(obj){
var it = obj.validity;
if (false===it.valueMissing) {
obj.setCustomValidity('');
}else{
obj.setCustomValidity('用户名：请输入此字段');
}
};
function checkEmail(obj){
var it = obj.validity;
if (true===it.valueMissing) {
obj.setCustomValidity('邮箱：请输入此字段');
}else{
if (true===it.typeMismatch) {
obj.setCustomValidity("邮箱：请在电子邮件地址中包括'@'。"+obj.value+"中缺少'@'。");
}else{
obj.setCustomValidity('');
}
}
}
function replaceValidationUI(form) {
form.addEventListener("invalid", function(event) {
event.preventDefault();
}, true);
form.addEventListener("submit", function(event) {
if (!this.checkValidity()) {
event.preventDefault();
}
});
//此处写代码
var submitBtn =document.getElementById('submits');
submitBtn.addEventListener('click',function(event){
var invalidFields = form.querySelectorAll(":invalid"),
errorMessages = form.querySelectorAll(".error-messages"),
parent;
for (var i = 0; i < errorMessages.length; i++) {
errorMessages[i].parentNode.removeChild(errorMessages[i]);
}
for (var i = 0; i < invalidFields.length; i++) {
parent = forms;
parent.insertAdjacentHTML("afterBegin","<ul class='error-messages'>"+"<li>"+
invalidFields[ i ].validationMessage+"</li>"+"</ul>");
}
if (invalidFields.length > 0) {
invalidFields[0].focus();
// errorMessages.style.display = "block";
}
})
}
var forms = document.getElementById("forms");
replaceValidationUI(forms);
</script>
</body>
</html>
就是没有办法加载完点击按钮就出现任务中一开始的效果。
1回答
-
一路电光带火花
2017-10-05
<script> function replaceValidationUI(form) { form.addEventListener("invalid", function(event) { event.preventDefault(); }, true); form.addEventListener("submit", function(event) { if (!this.checkValidity()) { event.preventDefault(); } }); form.insertAdjacentHTML("afterbegin", "<ul class='error-messages'></ul>"); var submitButton = document.getElementById("submits"); 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; if (invalidFields.length > 0) { invalidFields[0].focus(); errorMessages.style.display = "block"; } }); } var forms = document.getElementById("forms"); replaceValidationUI(forms); </script>这是我写的，你可以看下
1
相似问题