我不知道为什么checkValidity()方法不检查我的输入是true还是false。我的程序说checkValidity()不是一个函数...我的程序正在运行，但是checkValidity()调试了我的程序。
我试图制作一个在表中添加数据并检查输入是否有效的程序。每次单击“处理”按钮时，数据都会添加到表中，并且重置将清除输入并清除表。
我的教授使我熟悉了使用checkValidity()方法来确保输入有效。我不知道我的程序是否有错误或浏览器不支持checkValidity方法？
我使用的是最新版的Chrome。每个人都可以检查我的代码是否有错误，并教我如何实现checkValidity方法吗？
<!DOCTYPE html>
<html lang="en">
<head><title>Sales Person</title>
<!-- Latest compiled CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<form name="myform" onsubmit="validateForm return false;">
<div class="row">
<div class="form-group">
<label for="name">Sales Person:</label>
<input type="text" id = "name" placeholder="Enter Your Name" required><br/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="product1">Product 1:</label>
<input type="number" id = "product1" placeholder="Enter Product 1"><br/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="product1">Product 2:</label>
<input type="number" id = "product2" placeholder="Enter Product 2" ><br/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="product1">Product 3:</label>
<input type="number" id = "product3" placeholder="Enter Product 3" ><br/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="product1">Product 4:</label>
<input type="number" id = "product4" placeholder="Enter Product 4" ><br/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="product1">Product 5:</label>
<input type="number" id = "product5" placeholder="Enter Product 5" ><br/>
</div>
</div>
<div class="row">
<div class="col-md-3">
<input type="submit" class="btn btn-default" onclick="Process()" value="Submit">
</div>
<div class="col-md-3">
<input type="reset" class="btn btn-default" onclick="erase()" value="Reset">
</div>
</form>
</div>
<div class="col-md-8" id="sales_table">
</div>
</div>
</div>
<script>
"use strict";
var table = "";
var table_header = "";
var table_body = "";
var table_footer = "";
table_header += "<table class= table table-bordered>";
table_header += "<tr>";
table_header += "<th class='text-center'>Name</th>";
table_header += "<th class='text-center'>Product 1</th>";
table_header += "<th class='text-center'>Product 2</th>";
table_header += "<th class='text-center'>Product 3</th>";
table_header += "<th class='text-center'>Product 4</th>";
table_header += "<th class='text-center'>Product 5</th>";
table_header += "<th class='text-center'>Total Sale Product</th>";
table_header += "<th class='text-center'>Commissions</th>";
table_header += "<tr>";
table_footer += "</table>";
function Process()
{
var sales_table = document.getElementById("sales_table").value;
var name=document.getElementById("name").value;
var product1=parseInt(document.getElementById("product1").value);
var product2=parseInt(document.getElementById("product2").value);
var product3=parseInt(document.getElementById("product3").value);
var product4=parseInt(document.getElementById("product4").value);
var product5=parseInt(document.getElementById("product5").value);
var sales_table = document.getElementById("sales_table");
var total;
var commissions;
if(isValid(name,product1,product2,product3,product4,product5)){
total = product1+product2+product3+product4+product5;
commissions = total * .30;
table_body += "<tr>";
table_body += "<td>"+name+"</td>";
table_body += "<td class='text-center'>" + product1.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + product2.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + product3.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + product4.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + product5.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + total.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + commissions.toFixed(2) + "</td>";
table_body += "</tr>";
table = table_header + table_body + table_footer;
sales_table.innerHTML = table;
}
}
function isValid (name,product1,product2,product3,product4,product5) {
try{
if(name.checkValidity==false){
throw name.validationMessage
}
if(product1.checkValidity==false){
throw product1.validationMessage
}
if(product2.checkValidity==false){
throw product2.validationMessage
}
if(product3.checkValidity==false){
throw product3.validationMessage
}
if(product4.checkValidity==false){
throw product4.validationMessage
}
if(product5.checkValidity==false){
throw product5.validationMessage
}
}
catch(err){
alert(err);
return false;
}
return true;
}
function erase()
{
document.getElementById("name").value="";
document.getElementById("product1").value="";
document.getElementById("product2").value="";
document.getElementById("product3").value="";
document.getElementById("product4").value="";
document.getElementById("product5").value="";
document.getElementById("sales_table").innerHTML="";
}
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
看来checkValidity是HTML5规范中为输入字段Constraints validation添加的一种方法。
您需要保留输入元素的引用，而不是值本身:
var name=document.getElementById("name");
var product1=document.getElementById("product1");
var product2=document.getElementById("product2");
var product3=document.getElementById("product3");
var product4=document.getElementById("product4");
var product5=document.getElementById("product5");
然后，您可以稍后在
checkValidity函数中调用isValid方法;)if (!name.checkValidity()) {
throw name.validationMessage;
}
// etc.
您需要调整if语句的内容:
total = parseInt(product1.value) + parseInt(product2.value) + parseInt(product3.value) + parseInt(product4.value) + parseInt(product5.value);
commissions = total * .30;
table_body += "<tr>";
table_body += "<td>"+name.value+"</td>";
table_body += "<td class='text-center'>" + parseInt(product1.value).toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + parseInt(product2.value).toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + parseInt(product3.value).toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + parseInt(product4.value).toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + parseInt(product5.value).toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + total.toFixed(2) + "</td>";
table_body += "<td class='text-center'>" + commissions.toFixed(2) + "</td>";
table_body += "</tr>";