Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/81.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
JavaScript html web表单_Javascript_Html_Forms_Validation - Fatal编程技术网

JavaScript html web表单

JavaScript html web表单,javascript,html,forms,validation,Javascript,Html,Forms,Validation,我目前正在使用html编写“表单条目”。我还使用JavaScript验证来验证表单中的输入。目前,我有‘姓名’、‘受试者’和‘考试编号’,每一个都在工作,都有功能验证。但是,我需要为“资格”添加验证。输入类型必须为单击选择,“确认”必须为单选按钮。应该有三个单选按钮,分别称为“GCSE”、“AS”和“A2”。如果有人能帮助我使用单选按钮,并且用户一次只能单击并选择一种资格类型,那就太好了单击资格认证后,用户需要收到一条消息,告知他们已选择其资格认证“您已选择GCSE作为您的资格认证”此消息应在他

我目前正在使用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>   

报考
函数validateForm(e){
var结果=真;
var msg=“”;
if(document.ExamEntry.name.value==“”){
msg+=“您必须输入您的姓名\n”;
document.ExamEntry.name.focus();
document.getElementById('name').style.color=“红色”;
结果=假;
}
if(document.ExamEntry.subject.value==“”){
msg+=“您必须输入主题\n”;
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color=“red”;
结果=假;
}
var regex=/^\d{4}$/;
如果(document.ExamEntry.examition\u number.value==“”){
msg+=“您必须输入您的考试编号”;
结果=假;
}else if(isNaN(文件、考试、考试编号、数值)){
msg+=“检查编号应仅包含数字”;
结果=假;
}如果(!regex.test(document.ExamEntry.examition_number.value)){
msg+=“检查编号应正好包含4位数字”;
结果=假;
}
如果(msg!=“”){
警报(msg);
}
返回结果;
}
报考表
名称
主题
考试号码
选择你的资格
GCSE
AS
A2

好的,我有一个解决方案:)试试这个

然后将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>

函数validateForm(e){
var结果=真;
var msg=“”;
if(document.ExamEntry.name.value==“”){
msg+=“您必须输入您的姓名\n”;
document.ExamEntry.name.focus();
document.getElementById('name').style.color=“红色”;
结果=假;
}
if(document.ExamEntry.subject.value==“”){
msg+=“您必须输入主题\n”;
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color=“red”;
结果=假;
}
var regex=/^\d{4}$/;
如果(document.ExamEntry.examition\u number.value==“”){
msg+=“您必须输入您的考试编号”;
结果=假;
}else if(isNaN(文件、考试、考试编号、数值)){
msg+=“检查编号应仅包含数字”;
结果=假;
}如果(!regex.test(document.ExamEntry.examition_number.value)){
msg+=“检查编号应正好包含4位数字”;
结果=假;
}
if(document.getElementById('a1')。选中){
如果(msg!=“”){
警报(msg);
}
返回结果;
}
否则{
if(document.getElementById('a2')。选中){
如果(msg!=“”){
警报(msg);
}
返回结果;
}
否则{
if(document.getElementById('a3')。选中){
如果(msg!=“”){
警报(msg);
}
返回结果;
}
否则{
msg+=“请选择一个选项”;
结果=假;
如果(msg!=“”){
警报(msg);
}
返回结果;
}   
}      
}
}

在每个名为“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;
    }
}
var qualifications=document.getElementsByName('group1'))
对于(变量i=0,长度=0.length;i
以下是如何将无线电验证添加到代码中。(注意:此设置仅适用于
name=“group1”
收音机,您需要一个for循环来检查group2、group3等。)

通过每个收音机上的onclick事件通知用户他们单击了什么限定

功能

function qualinform(qualname) {
  alert(qualname + " was selected as your qualification.");
}
单选按钮示例(名称应输入onclick参数)

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>

报考
函数qualinfo(qualname){
警报(qualname+“已被选为您的资格证书”);
}
函数validateForm(e){
var结果=真;
var msg=“”;
if(document.ExamEntry.name.value==“”){
msg+=“您必须输入您的姓名\n”;
document.ExamEntry.name.focus();
document.getElementById('name').style.color=“红色”;
结果=假;
}
if(document.ExamEntry.subject.value==“”){
msg+=“您必须输入主题\n”;
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color=“red”;
结果=假;
}
if(document.ExamEntry.group1.value==“”){
msg+=“您必须选择一个限定条件\n”;
document.ExamEntry.subject.focus();
document.getElementById('radioqual').style.color=“红色”;
结果=假;
}
var regex=/^\d{4}$/;
如果(document.ExamEntry.examition\u number.value==“”){
msg+=“您必须输入您的考试编号”;
结果=假;
}else if(isNaN(文件、考试、考试编号、数值)){
msg+=“检查编号应仅包含数字”;
结果=假;
}如果(!regex.test(document.ExamEntry.examition_number.value)){
msg+=“检查编号应正好包含4位数字”;
结果=假;
}
如果(msg!=“”){
警报(msg);
}
ret
<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>