首先，大家新年快乐！
我尝试制作一个表格，其中的复选框（文本）在开始时（调用函数verif()）必须使用不同的颜色，而不是用户输入名称后颜色必须用白色更改，我也使用该方法，setCustomValidity建议用户在他（她）忘记的情况下填充盒子，但是即使我没有得到必须填充盒子的错误消息也是如此。不幸的是我的计划看起来有错误，但是我不知道那是哪里。
<section id="secty">
<h1 id="demo">Managing Form</h1>
<form id="usuer_register" name="usuer_register" method="post">
<table>
<tr><td>Name:</td>
<td><input type="text" id="nam" name="nam"></td></tr>
<tr><td>Last name:</td>
<td><input type="text" id="name1" name="name1"></td></tr>
<tr><td>Age:</td>
<td><input type="text" id="age" name="age"></td></tr>
<tr><td><input type="submit" id="regist" name="regist"></td></tr>
</table>
</form>
</section>
<script>
function start(){
var x=document.getElementById("nam");
var y=document.getElementById("name1");
x.addEventListener("input", verif, false);
y.addEventListener("input", verif, false);
verif();
}
function verif(){
if(x.value=="" && y.value==""){
x.setCustomValidity("Enter Name or Lastname");
x.style.background="#803ADD";
y.style.background="#803ADD";
}
else{
x.setCustomValidity(""); // this restart as default;
x.style.background="#FFFFFF";
y.style.background="#FFFFFF";
}
}
window.addEventListener("load", start, false);
</script>
这里有一堆要重做。请检查下面代码中的HTML，CSS和JavaScript注释以获取详细信息，但是要点是HTML，CSS和JavaScript已经提供了您正在寻找的大多数功能。如果您仅添加不能为空required的input元素，则将获得自动有效性检查和样式。
检查我们的HTML5表单有效性如何工作。
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<style>
/* CSS provides valid and invalid pseudo-classes which will automatically
kick in based on the validity of form elements */
.validate:valid { background-color:#fff; }
.validate:invalid { background-color:#803ADD; }
label { display:inline-block; width: 5em; }
form > div { margin-bottom: .2em; }
</style>
</head>
<body>
<section>
<h1>Managing Form</h1>
<!-- Don't forget to fill in the action attribute of the form! -->
<form id="usuer_register" name="usuer_register" method="post" action="">
<!-- Do not use tables for layout! They are only for displaying tabular data. -->
<div>
<!-- Use label elements with form fields for better accessibility.
Now, clicking on the label text focuses the field. Also, type="text"
is not required on textboxes as "text" is the default type.
Lastly, just add the "required" attribute for automatic validity checking. -->
<label for="fName">Name: </label><input id="fName" name="fName" class="validate" required>
</div>
<div>
<label for="lName">Last Name: </label><input id="lName" name="lName" class="validate" required>
</div>
<div>
<label for="age">Age: </label><input id="age" name="age">
</div>
<div>
<!-- Submit Buttons shouldn't have a name because they
don't have any data that you would want submitted
along with the form. -->
<input type="submit">
</div>
</form>
</section>
<!-- As long as your script element is the last element
in the body, there is no need for a "start" function
or a "load" event hander. The following code will just
run when it is reached and at this point in the document
all the HTML has been parsed. -->
<script>
// Use meaningfull variable names
let fName = document.getElementById("fName");
let lName = document.getElementById("lName")
// The inputs will be invalid initially, so flag them
// that way from the start
fName.setCustomValidity("Enter First Name");
lName.setCustomValidity("Enter Last Name");
fName.addEventListener("input", verif);
lName.addEventListener("input", verif);
function verif(){
// The field has recieved input, so the required validation
// requirement has been met.
this.setCustomValidity("");
}
</script>
</body>
</html>新年快乐！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句