验证单选按钮和复选框
[英]Validating radio buttons and checkboxes
问题描述
我在获取代码以验证单选按钮和复选框时遇到一些问题。 我可以为我的文本区域弄清楚，但是我似乎无法用其他输入解决问题。
我不太确定还要采取什么其他步骤，尤其是对于这些多选题。 让我知道您的建议，将不胜感激。
function validateForm() { var x = document.forms["quiz"]["text1"].value; if (x == "") { alert("Oops, you forgot the text!"); return false; } else if (x == "yes" || x == "Yes" || x == "YES") { return true; } } function formSubmit() { document.getElementById("quiz").submit(); } function reset() { document.getElementById("reset").reset(); } function validate() { var a = document.getElementById("rad1").required; var b = document.getElementById("op1").required; var c = document.getElementById("rad2").required; if (a == false || b == false || c == false) { alert("Oops, you forgot something!") } }
<h4>First, Let's take a small quiz! What type of Developer am I?</h4> <form name="quiz" id="quiz" method="post"> <table> <tr> <td> <label for="ques1">Do you ever think about how you would design a web page?</label> </td> <td> <input type="radio" value="no" name="rad1">NO <input type="radio" value="yes" name="rad1">YES </td> </tr> <tr> <td> <label for="ques2">If yes, which of these are your main priorities when thinking of the design? If no, please check N/A</label> </td> <td> <input type="checkbox" name="op1"> Ease of Use <input type="checkbox" name="op1"> Graphics & Content <input type="checkbox" name="op1"> The Data Collected <input type="checkbox" name="op1"> N/A </td> </tr> <tr> <td> <label for="ques3">Do you enjoy conducting research, asking questions, and building reports?</label> </td> <td> <input type="radio" value="no" name="rad2">NO <input type="radio" value="yes" name="rad2">YES </td> </tr> <tr> <td> <label for="ques4">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label> </td> <td> <input type="text" name="text1" maxlength="3"> </td> </tr> <tr> <td></td> <td> <input type="button" value="Finished!" id="submit" onclick="return validateForm(document.getElementById('quiz'))"> <input type="reset" id="reset"> </td> </tr> </table> </form>
1 个解决方案
解决方案1
0 2018-11-06 06:33:09
请检查以下修改过的HTML。 我已用您期望的验证重新修改。 通过代码来了解一下
<!DOCTYPE html> <html> <head> <script> function validateForm() { debugger; if(!validate()) { var x = document.forms["quiz"]["text1"].value; if (x == "") { alert("Oops, you forgot the text!"); return false; } else if (x == "yes" || x == "Yes" || x== "YES") { alert("Alright"); return true; } } } function formSubmit() { document.getElementById("quiz").submit(); } function reset() { document.getElementById("reset").reset(); } function validate() { debugger; var a1 = document.getElementById("rad1").checked; var a2 = document.getElementById("rad2").checked; var a3 = document.getElementById("rad3").checked; var a4 = document.getElementById("rad4").checked; var b1 = document.getElementById("op1").checked; var b2 = document.getElementById("op2").checked; var b3 = document.getElementById("op3").checked; var b4 = document.getElementById("op4").checked; if ((a1 == false && a2 == false) || (a3 == false && a4 == false) || (b1 == false && b2 == false && b3 == false && b4 == false)) { alert("Oops, you forgot first three questions!") return false; } } </script> </head> <body> <h4>First, Let's take a small quiz! What type of Developer am I?</h4> <form name="quiz" id="quiz" method="post"> <table> <tr> <td> <label for="ques1">Do you ever think about how you would design a web page?</label> </td> <td> <input type="radio" value="no" id="rad1">NO <input type="radio" value="yes" id="rad2">YES </td> </tr> <tr> <td> <label for="ques2">If yes, which of these are your main priorities when thinking of the design? If no, please check N/A</label> </td> <td> <input type="checkbox" id="op1"> Ease of Use <input type="checkbox" id="op2"> Graphics & Content <input type="checkbox" id="op3"> The Data Collected <input type="checkbox" id="op4"> N/A </td> </tr> <tr> <td> <label for="ques3">Do you enjoy conducting research, asking questions, and building reports?</label> </td> <td> <input type="radio" value="no" id="rad3">NO <input type="radio" value="yes" id="rad4">YES </td> </tr> <tr> <td> <label for="ques4">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label> </td> <td> <input type="text" name="text1" maxlength="3"> </td> </tr> <tr> <td></td> <td> <input type="button" value="Finished!" id="submit" onclick="return validateForm(document.getElementById('quiz'))"> <input type="reset" id="reset"> </td> </tr> </table> </form> </body> </html>
单选按钮未验证
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.