一、表单编辑

使用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="不合格";}}}