一、表单编辑
使用bootstrap可以快速创建表单样式。
needs-validation 可以验证表单,如果验证不通过,表单不会提交;
onSubmit="return false;"使得表单提交不会刷新页面;
下方js代码是用来控制表单验证;
<div class="container">
<div class="row" id="app">
<div class="col-4">
<form action="" class="needs-validation" onSubmit="return false;">
<div class="form-group">
<h2 class="text-center">体型</h2>
<label for="s_height">年龄:</label>
<input type="number" class="form-control" placeholder="输入周岁" id="s_age" min="16" max="39" required>
<label for="s_height">身高(cm):</label>
<input type="number" class="form-control" placeholder="输入身高" id="s_height" min="160" max="195" required>
</div>
<div class="form-group">
<label for="s_weight">体重(kg):</label>
<input type="number" class="form-control" placeholder="输入体重" id="s_weight" min="45" max="100" required>
</div>
<button class="btn btn-primary" id="compute1" onclick="compute_result1()">计算</button>
<h1 id="result1"></h1>
</form>
</div>
</div>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
// 获取表单验证样式
var forms = document.getElementsByClassName('needs-validation');
// 循环并禁止提交
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
二、js代码编写
function compute_result1(){
var height=document.getElementById("s_height").value;
var weight=document.getElementById("s_weight").value;
var result=(weight/(height*height))*10000;
var age=document.getElementById("s_age").value;
if (age<=24){
if (result<=25.9 && result>=18.5){
document.getElementById("result1").innerHTML="合格";
}
else{document.getElementById("result1").innerHTML="不合格";}
}
else if(age>24 && age<30){
if (result<=26.9 && result>=18.5){
document.getElementById("result1").innerHTML="合格";
}
else{document.getElementById("result1").innerHTML="不合格";}
}
else if(age>29 && age<40){
if (result<=27.9 && result>=18.5){
document.getElementById("result1").innerHTML="合格";
}
else{document.getElementById("result1").innerHTML="不合格";}
}
else if(age>39 && age<50){
if (result<=28.9 && result>=18.5){
document.getElementById("result1").innerHTML="合格";
}
else{document.getElementById("result1").innerHTML="不合格";}
}
else if(age>49 && age<60){
if (result<=29.4 && result>=18.5){
document.getElementById("result1").innerHTML="合格";
}
else{document.getElementById("result1").innerHTML="不合格";}
}
else if(age>=60){
if (result<=29.9 && result>=18.5){
document.getElementById("result1").innerHTML="合格";
}
else{document.getElementById("result1").innerHTML="不合格";}
}
}