JavaScript html 网页表单答案

【问题标题】：JavaScript html web formJavaScript html 网页表单
【发布时间】：2014-07-04 10:52:07
【问题描述】：

我目前正在使用 html 来编写“表单条目”。我还使用 JavaScript 验证来验证表单的输入。目前，我有“姓名”、“主题”和“考试编号”，每一个都可以正常工作并进行功能验证。但是我需要为“资格”添加验证。输入的类型必须是单击选择，并且“资格”必须是单选按钮。应该有三个单选按钮，分别称为“GCSE”、“AS”和“A2”。如果有人可以帮助我使用单选按钮，那就太好了，并且用户应该只能一次单击并选择一种类型的资格。 点击资格后，用户需要收到一条消息，告知他们选择了他们的资格“您已选择 GCSE 作为您的资格”此消息应该在他们点击他们的资格后立即显示。 GCSE 只是一个例子，它可以是 AS 或 A2 或 GCSE。谢谢。

这是我的代码：单选按钮靠近底部，但验证应低于“考试编号”的验证

<head>

<title>Exam Entry</title>

<script language="javascript" type="text/javascript">

function validateForm(e) {

var result = true;
var msg="";

if (document.ExamEntry.name.value=="") {
    msg+="You must enter your name \n";
    document.ExamEntry.name.focus();
    document.getElementById('name').style.color="red";
    result = false;
}

if (document.ExamEntry.subject.value=="") {
    msg+="You must enter the subject \n";
    document.ExamEntry.subject.focus();
    document.getElementById('subject').style.color="red";
    result = false;
}

var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
msg+="You must enter your examination number";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
result = false;
}

if (msg != "") {
    alert(msg);
}

return result;
}
</script>



</head>

<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html" onsubmit="return    validateForm();">
<table width="60%" border="0">
    <tr>
        <td id="name">Name</td>
        <td><input type="text" name="name" /></td>
    </tr>
    <tr>
        <td id="subject">Subject</td>
        <td><input type="text" name="subject" /></td>
    </tr>
        <td id="Examination_number">Examination number</td>
        <td><input type="text" maxlength="4" name="Examination_number" /></td>
    </tr>
    <tr>
<td id="qualification">Choose your qualification</td>
<tr>
<td>
<input type="radio" name="group1" value="GCSE">GCSE<br>
</td>
</tr>
<tr>
<td>
<input type="radio" name="group1" value="AS">AS<br>
</td>
</tr>
<tr>
<td>
<input type="radio" name="group1" value="A2">A2<br>
</td>
</tr>
<tr>
    <td><input type="submit" name="Submit" value="Submit" /></td>
    <td><input type="reset" name="Reset" value="Reset" /></td>
    </tr>
</table>
</form>
</body>

</html>

【问题讨论】：

您可以为此创建jsfiddle 吗？
@TechnoKnol 嗨，jsfiddle.net/cfW3T
@SpencerMay 我在看到你的代码之前已经更新了，但是现在，我正在使用你的完整代码，谢谢！

标签： javascript html forms validation

【解决方案1】：

以下是向代码添加无线电验证的方法。（请注意，这是为name="group1" 无线电设置的，您需要一个 for 循环来检查 group2、group3 等）

if (document.ExamEntry.group1.value=="") {
    msg+="You must choose a qualification\n";
    document.ExamEntry.subject.focus();
    document.getElementById('radioqual').style.color="red";
    result = false;
}

您通过每个收音机上的 onclick 事件通知用户他们点击了什么资格。

功能

function qualinform(qualname) {
  alert(qualname + " was selected as your qualification.");
}

单选按钮示例（名称应放入onclick参数中）

<input onclick="qualinform('GCSE');" type="radio" name="group1" value="GCSE">GCSE

这是完整的代码。

<html>
<head>

<title>Exam Entry</title>

<script language="javascript" type="text/javascript">
function qualinform(qualname) {
  alert(qualname + " was selected as your qualification.");
}

function validateForm(e) {

var result = true;
var msg="";

if (document.ExamEntry.name.value=="") {
    msg+="You must enter your name \n";
    document.ExamEntry.name.focus();
    document.getElementById('name').style.color="red";
    result = false;
}

if (document.ExamEntry.subject.value=="") {
    msg+="You must enter the subject \n";
    document.ExamEntry.subject.focus();
    document.getElementById('subject').style.color="red";
    result = false;
}

if (document.ExamEntry.group1.value=="") {
    msg+="You must choose a qualification\n";
    document.ExamEntry.subject.focus();
    document.getElementById('radioqual').style.color="red";
    result = false;
}

var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
msg+="You must enter your examination number";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
result = false;
}

if (msg != "") {
    alert(msg);
}

return result;
}
</script>



</head>

<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html" onsubmit="return     validateForm();">
<table width="60%" border="0">
    <tr>
        <td id="name">Name</td>
        <td><input type="text" name="name" /></td>
    </tr>
    <tr>
        <td id="subject">Subject</td>
        <td><input type="text" name="subject" /></td>
    </tr>
        <td id="Examination_number">Examination number</td>
        <td><input type="text" maxlength="4" name="Examination_number" /></td>
    </tr>
    <tr>
<td id="qualification">Choose your qualification</td>
<tr>
<td id="radioqual">
<input onclick="qualinform('GCSE');" type="radio" name="group1" value="GCSE">GCSE<br>
<input onclick="qualinform('AS');" type="radio" name="group1" value="AS">AS<br>
<input onclick="qualinform('A2');" type="radio" name="group1" value="A2">A2<br>
</td>
</tr>
    <tr>
        <td><input type="submit" name="Submit" value="Submit" /></td>
        <td><input type="reset" name="Reset" value="Reset" /></td>
    </tr>
</table>
</form>
</body>

</html>

【讨论】：

【解决方案2】：

好的，我有一个解决方案给你 :) 试试这个

然后将 id 分配给您的输入作为 a1、a2 和 a3

<script language="javascript" type="text/javascript">

function validateForm(e) {

var result = true;
var msg="";

if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}

if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}

var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
msg+="You must enter your examination number";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
result = false;
}

if(document.getElementById('a1').checked){
    if (msg != "") {
    alert(msg);
    }

    return result;  
}
else{
    if(document.getElementById('a2').checked){
        if (msg != "") {
        alert(msg);
        }

        return result;   
    }
    else{
        if(document.getElementById('a3').checked){
             if (msg != "") {
             alert(msg);
             }

             return result;   
        }
        else{
            msg+="Please select an option";
            result = false;
            if (msg != "") {
            alert(msg);
            }

            return result;
        }   
    }      
}


}
</script>

【讨论】：

嗨，我认为我的任务是使用 JavaScript，可以这样做吗？
我要添加 // SUCCESS 和 // FAIL 吗？？
那是你添加你自己的代码的地方:) - 所以它说失败的地方只是把你的警报放进去说请选择一个选项，成功就是他们选择了一个:)
有一个完整的解决方案给你 :) 我希望这会有所帮助

【解决方案3】：

遍历每个名为 'qualification' 的表单元素，当您找到选中的元素时，获取它的值并将其推送到您的验证消息中，如下所示：

var qualifications = document.getElementsByName('group1') 

for (var i = 0, length = qualifications.length; i < length; i++) {
    if (radios[i].checked) {
        msg+='you have selected ' + radios[i].value + ' as your qualification.';
        break;
    }
}

【讨论】：

...回顾您的 HTML，我发现这些项目的名称为“group1”（不是“qualification”），所以我再次编辑了我的答案。