我写了一个基本的BMI计算器，工作正常。现在我们在课堂上添加验证。我们做了一个基本的课堂验证，我认为我理解一切都很好。现在，当我试图将验证过程纳入我的BMI计算器时，没有任何作用。不明白为什么，我在课堂上有例子，以及我写的实际的javascript，我看不出我做错了什么。
Soooo，这是我的JS小提琴和代码。希望有人能指出我正确的方向。 http://jsfiddle.net/56dcedbu/
HTML -
<html>
<head>
<meta charset="utf-8">
<title>BMI Calc</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="BMI.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label for="txtAge">Age:</label>
<input type="text" class="txtInput" id="txtAge" value="0"/><p id="ageRes"></p>
<br/>
<label for="txtMass">Mass in Lbs:</label>
<input type="text" class="txtInput" id="txtMass" value="0"/>
<br/>
<label for="txtHinch">Height in Inches:</label>
<input type="text" class="txtInput" id="txtHinch" value="0"/>
<br/>
<input type="button" id="btnCalc" value="Calculate"/>
<p id="result2">Result</p>
</form>
</body>
</html>
和JS -
// JavaScript Document
$(function () {
//Identify Variables
var txtMass, txtHinch, result;
var isValid = $('#form1').validate().form();
// attach event listener to the toggle button's click event
$('#btnCalc').click(function () {
//Set validator
$.validator.setDefaults({
errorElement: "span",
errorClass: "form_error",
errorPlacement: function(error,element){
error.insertAfter(element)
}
});
$.extend($.validator.messages,{
required: "* Required field"
});
//Set Validation perameters
$("#form1").validate({
rules: {
txtAge: {
required: true,
range: [1, 120],
digits: true
},
txtMass: {
require: true,
digits: true
},
txtHinch: {
requre: true,
digits: true
}
}
});
if (isValid) {
//Set Age range for form accuracy
if (txtAge < 16 || txtAage > 80){
//Output
$('#ageRes').html('Results may not be accurate at your age')
} else { (txtAge >= 16 || txtAge <= 80)
$('#ageRes').html('Results should be accurate considering your age')
//Equation for BMI
result = ($('#txtMass').val() / ($('#txtHinch').val() * $('#txtHinch').val())) * 703;}
//If - Else statement from output of BMI equation
if (result < 16){
$('#result2').html('Result: '+result.toFixed(1) + ' you are Severely underweight')
} else if (result <=18 ){
$('#result2').html('Result: '+result.toFixed(1) + ' you are underweight')
} else if (result <=24){
$('#result2').html('Result: '+result.toFixed(1) + ' you are healthy')
} else if (result <= 30 ){
$('#result2').html('Result: '+result.toFixed(1) + ' you are seriously overweight')
} else if (result <=35 ){
$('#result2').html('Result: '+result.toFixed(1) + ' you are obese')
} else if (result <=40 ){
$('#result2').html('Result: '+result.toFixed(1) + ' you are seriously obese')
}
}
});
});
像往常一样，提前谢谢你，我总能在这里获得惊人的帮助。你们是无价的资源。
答案 0 :(得分：1)
这里存在多个问题
// JavaScript Document
$(function () {
//Identify Variables
var txtMass, txtHinch, result, txtAge;
//Set validator
$.validator.setDefaults({
errorElement: "span",
errorClass: "form_error",
errorPlacement: function (error, element) {
error.insertAfter(element)
}
});
$.extend($.validator.messages, {
required: "* Required field"
});
//Set Validation perameters
$("#form1").validate({
rules: {
txtAge: {
required: true,
range: [1, 120],
digits: true
},
txtMass: {
required: true,
digits: true
},
txtHinch: {
required: true,
digits: true
}
}
});
$('#btnCalc').click(function () {
var isValid = $('#form1').validate().form();
if (isValid) {
txtAge = $('#txtAge').val();
//Set Age range for form accuracy
if (txtAge < 16 || txtAge > 80) {
//Output
$('#ageRes').html('Results may not be accurate at your age');
return;
} else if (txtAge >= 16 || txtAge <= 80) {
$('#ageRes').html('Results should be accurate considering your age')
}
//Equation for BMI
result = ($('#txtMass').val() / ($('#txtHinch').val() * $('#txtHinch').val())) * 703;
//If - Else statement from output of BMI equation
if (result < 16) {
$('#result2').html('Result: ' + result.toFixed(1) + ' you are Severely underweight')
} else if (result <= 18) {
$('#result2').html('Result: ' + result.toFixed(1) + ' you are underweight')
} else if (result <= 24) {
$('#result2').html('Result: ' + result.toFixed(1) + ' you are healthy')
} else if (result <= 30) {
$('#result2').html('Result: ' + result.toFixed(1) + ' you are seriously overweight')
} else if (result <= 35) {
$('#result2').html('Result: ' + result.toFixed(1) + ' you are obese')
} else if (result <= 40) {
$('#result2').html('Result: ' + result.toFixed(1) + ' you are seriously obese')
}
}
});
});<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="form1" name="form1" method="post" action="">
<label for="txtAge">Age:</label>
<input type="text" class="txtInput" id="txtAge" name="txtAge" value="0" />
<p id="ageRes"></p>
<br/>
<label for="txtMass">Mass in Lbs:</label>
<input type="text" class="txtInput" id="txtMass" name="txtMass" value="0" />
<br/>
<label for="txtHinch">Height in Inches:</label>
<input type="text" class="txtInput" id="txtHinch" name="txtHinch" value="0" />
<br/>
<input type="button" id="btnCalc" value="Calculate" />
<p id="result2">Result</p>
</form>