嗨，我有下面的HTML页面，我正试图让它验证我的表单，然后运行我的函数，基于它创建一个乘法表。我真的不明白是什么导致了它不起作用。如果有任何帮助，我们将不胜感激：(我对JQuery不是很擅长，我才刚刚开始使用它。我认为这应该根据我所说的规则验证我的代码，如果错误，则发送错误消息，并且只有在它工作的情况下才运行我的表制作函数。我在没有验证的情况下运行了我的表函数，它运行得很好，所以这不是的问题
<html lang="en">
<head>
<title> Multiplication Table </title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script type='text/javascript' src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type='text/javascript' src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/additional-methods.js"></script>
<script type="text/javascript">
function validate() {
//$(document).ready(function() {
$("form[name='tabley-boy']").validate({
rules: {
mnrows : {
required: true,
number: true,
min: -50,
max: 49
},
mxrows: {
required: true,
number: true,
min: -49,
max: 50
},
mncols: {
required: true,
number: true,
min: -49,
max: 50
},
mxcols: {
required: true,
number: true,
min: -49,
max: 50
}
},
messages : {
mnrows: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -50 and 49",
max: "Your number must be between -50 and 49"
},
mxrows: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -49 and 50",
max: "Your number must be between -49 and 50"
},
mncols: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -50 and 49",
max: "Your number must be between -50 and 49"
},
mxcols: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -49 and 50",
max: "Your number must be between -49 and 50"
}
},
submitHandler: function() {
Table();
return false;
}
});
}
function Table()
{
var minrows = parseInt(document.getElementById('mnrows').value);
var maxrows = parseInt(document.getElementById('mxrows').value);
var mincols = parseInt(document.getElementById('mncols').value);
var maxcols = parseInt(document.getElementById('mxcols').value);
var output='';
var j=mincols;
var temp=0;
var i=0;
var countm=minrows;
output=output + "<table border='1' width='500' cellspacing='0'cellpadding='5'> ";
output = output + "<tr> <td> </td> ";
//this part creates the column numbers pre multiplication in the black background and styled
for(temp=mincols;temp<=maxcols;temp++)
{
output = output + "<td style='background-color:black; color:white; font-weight: bold;'> " + temp + "</td> ";
}
output = output + "</tr> ";
for(i=minrows;i<=maxrows;i++)
{
//this part creates the row numbers pre multiplication in the black background and styled
output = output + "<tr> <td style='background-color:black; color:white; font-weight: bold;'> " +countm +"</td> ";
countm++;
//this next part fills in the rows as it goes by restarting j after each while loope
while(j<=maxcols)
{
output = output + "<td> " + i*j + "</td> ";
j++;
}
output = output + "</tr> ";
j = mincols;
}
output = output + "</table> ";
document.getElementById('cooltable').innerHTML =output;
}
</script>
</head>
<body>
<h1 style="text-align:center;"> Multiplication Table Creator!</h1>
<div class="container">
<div class="row">
<div class="col-5">
<form name="tabley-boy" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2">Minimum for rows: </label> <div class="col-sm-10">
<input type="text" name="mnrows" id="mnrows"/></div><br/>
<label class="col-sm-2">Maximum for rows </label> <div class="col-sm-10">
<input type="text" name="mnrows" id="mxrows"/></div><br/>
<label class="col-sm-2">Minimum for columns </label> <div class="col-sm-10">
<input type="text" name="mncols" id="mncols"/></div><br/>
<label class="col-sm-2">Maximum for columns </label> <div class="col-sm-10">
<input type="text" name="mncols" id="mxcols"/></div><br/>
<input name="generate" type="button" value="Create Multiplication Table!" onclick='validate();'/>
</form>
</div>
</div>
<div class="col-5" id="cooltable">
</div>
</div>
</div>
<!--
<script>
// $( document ).ready(function() {
// validate();
// });
</script>
-->
</body>
</html>
我修改了一些代码部分，并在jsfiddle中运行了这些代码。
你错过了jQuery
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
我在就绪时用文档替换了您的方法validate。
我从您的输入中删除了onclick事件，并使用了提交按钮而不是type="按钮"；因为这只是一个动作的from。
这个：
<input name="generate" type="button" value="Create Multiplication Table!" onclick='validate();'/>
到此：
<input name="generate" type="submit" value="Create Multiplication Table!"/>
下面是您的代码和我的更改。
<head>
<title> Multiplication Table </title>
<meta charset="utf-8">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script type='text/javascript' src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type='text/javascript' src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/additional-methods.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form[name='tabley-boy']").validate({
rules: {
mnrows : {
required: true,
number: true,
min: -50,
max: 49
},
mxrows: {
required: true,
number: true,
min: -49,
max: 50
},
mncols: {
required: true,
number: true,
min: -49,
max: 50
},
mxcols: {
required: true,
number: true,
min: -49,
max: 50
}
},
messages : {
mnrows: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -50 and 49",
max: "Your number must be between -50 and 49"
},
mxrows: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -49 and 50",
max: "Your number must be between -49 and 50"
},
mncols: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -50 and 49",
max: "Your number must be between -50 and 49"
},
mxcols: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -49 and 50",
max: "Your number must be between -49 and 50"
}
},
submitHandler: function() {
Table();
return false;
}
});
});
function Table()
{
var minrows = parseInt(document.getElementById('mnrows').value);
var maxrows = parseInt(document.getElementById('mxrows').value);
var mincols = parseInt(document.getElementById('mncols').value);
var maxcols = parseInt(document.getElementById('mxcols').value);
var output='';
var j=mincols;
var temp=0;
var i=0;
var countm=minrows;
output=output + "<table border='1' width='500' cellspacing='0'cellpadding='5'> ";
output = output + "<tr> <td> </td> ";
//this part creates the column numbers pre multiplication in the black background and styled
for(temp=mincols;temp<=maxcols;temp++)
{
output = output + "<td style='background-color:black; color:white; font-weight: bold;'> " + temp + "</td> ";
}
output = output + "</tr> ";
for(i=minrows;i<=maxrows;i++)
{
//this part creates the row numbers pre multiplication in the black background and styled
output = output + "<tr> <td style='background-color:black; color:white; font-weight: bold;'> " +countm +"</td> ";
countm++;
//this next part fills in the rows as it goes by restarting j after each while loope
while(j<=maxcols)
{
output = output + "<td> " + i*j + "</td> ";
j++;
}
output = output + "</tr> ";
j = mincols;
}
output = output + "</table> ";
document.getElementById('cooltable').innerHTML =output;
}
</script>
</head>
<body>
<h1 style="text-align:center;"> Multiplication Table Creator!</h1>
<div class="container">
<div class="row">
<div class="col-5">
<form name="tabley-boy" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2">Minimum for rows: </label> <div class="col-sm-10">
<input type="text" name="mnrows" id="mnrows"/></div><br/>
<label class="col-sm-2">Maximum for rows </label> <div class="col-sm-10">
<input type="text" name="mnrows" id="mxrows"/></div><br/>
<label class="col-sm-2">Minimum for columns </label> <div class="col-sm-10">
<input type="text" name="mncols" id="mncols"/></div><br/>
<label class="col-sm-2">Maximum for columns </label> <div class="col-sm-10">
<input type="text" name="mncols" id="mxcols"/></div><br/>
<input name="generate" type="submit" value="Create Multiplication Table!"/>
</form>
</div>
</div>
<div class="col-5" id="cooltable">
</div>
</div>
</div>
<!--
<script>
// $( document ).ready(function() {
// validate();
// });
</script>
-->
</body>
</html>```