验证在Javascript上不起作用
我已经解决了如何启动警报框,但它似乎跳过了我的另一个验证,即检查其他feild,etc,还有什么想法,以及它为什么要跳过它?这真的很有帮助! 我对Javascript和HTML相当陌生,所以你能解释一下吗,谢谢验证在Javascript上不起作用,javascript,html,validation,Javascript,Html,Validation,我已经解决了如何启动警报框,但它似乎跳过了我的另一个验证,即检查其他feild,etc,还有什么想法,以及它为什么要跳过它?这真的很有帮助! 我对Javascript和HTML相当陌生,所以你能解释一下吗,谢谢 <html> <head> <title>Exam entry</title> <script language="javascript" type="text/javascript"> window.validateForm=
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.validateForm=function() {
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.Exam_Number.value == "") {
msg += "You must enter the exam Number \n";
document.ExamEntry.subject.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
if (document.ExamEntry.Exam_Number.value.length != 4) {
msg += "You must enter at least Four Numbers in the Exam Number \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var Number = document.ExamEntry.Exam_Number.value
if (isNaN(document.ExamEntry.Exam_Number.value)) {
msg += "You must enter at least four numeric characters in the Exam Number feild \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var checked = null;
var inputs = document.getElementsByName('Exam_Type');
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (checked == null) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} {
alert(msg)
return false;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" 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>
<tr>
<td id="Exam_Number">Exam Number</td>
<td><input type="text" name="Exam_Number"<font size="1">(Maximum characters: 4)</font> </td>
</tr>
<tr>
<table><form action="">
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
报考
window.validateForm=函数(){
var结果=真;
var msg=“”;
如果(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=“红色”;
//结果=假;
}
如果(document.ExamEntry.Exam_Number.value==“”){
msg+=“您必须输入考试编号\n”;
document.ExamEntry.subject.focus();
document.getElementById('考试编号').style.color=“红色”;
//结果=假;
}
if(document.ExamEntry.Exam_Number.value.length!=4){
msg+=“您必须在考试编号中至少输入四个数字\n”;
document.ExamEntry.Exam_Number.focus();
document.getElementById('考试编号').style.color=“红色”;
//结果=假;
}
变量编号=document.ExamEntry.Exam\u Number.value
if(isNaN(文档.考试.考试编号.值)){
msg+=“您必须在考试编号字段中输入至少四个数字字符\n”;
document.ExamEntry.Exam_Number.focus();
document.getElementById('考试编号').style.color=“红色”;
//结果=假;
}
检查的var=null;
var inputs=document.getElementsByName(“检查类型”);
对于(变量i=0;i
var inputs=document.getElementsByName('Exam_Type')代码>
到
var inputs=document.getElementsByName('examtype')代码>
似乎您为单选元素选择了错误的名称。您的for循环错误地检查了单选按钮
代码:
for(变量i=0;i
请在这里找到工作小提琴我在这里更改了代码请检查
请在这里找到工作小提琴
http://jsfiddle.net/sDLV4/3/使用HTML5约束验证,可以删除大部分代码,请参阅下面的我的修订版。除了Juergen Riemer指出的错误单选按钮组名称外,您的代码还存在以下问题:
更好地使用HTML5 DOCTYPE声明,请参见下文
用
代替
。script
元素没有language
属性,type
属性默认值为“text/javascript”
不要在窗口
对象上定义验证函数,而是将其定义为全局函数(如下所示),或者最好将其定义为命名空间对象的成员
与其将表单的name
属性设置为“ExamEntry”,不如设置其id
属性并引用变量的形式,如var examForm=document.forms[“ExamEntry”]代码>
HTML代码的格式不正确,因为在表单的表的第79行,您使用另一个表单元素启动另一个表元素,这两个表单元素都没有结束标记
此外,表单布局最好使用CSS,而不是表格
在下面的修订版中,我使用样式表设置表单样式,并在某些元素中使用相应的class
值
有关一般约束验证和HTML5约束验证功能的更多信息,请参见此
报考
函数validateForm(){
var结果=真;
var msg=“”;
检查的var=null;
var examForm=document.forms['ExamEntry'];
变量输入=examForm.examtype;
对于(变量i=0;i
我不确定你有什么问题?我用chrome运行了你的代码,验证工作正常。你能说得更具体些吗?跳过其他验证是什么意思?它似乎在firefoxPrepare fiddle中为我生成了正确的消息。只需5秒钟即可完成cpy并粘贴代码。请建议您自己开始调试。你的代码有很多问题。因为这是课程,我们可以帮助我,我在学校里没有HTML 5的ACSES,我必须使用给出的代码,这让它更难,有什么想法吗?
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8" />
<title>Exam entry</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/forms-min.css" />
<script>
function validateForm() {
var result = true;
var msg = "";
var checked = null;
var examForm = document.forms['ExamEntry'];
var inputs = examForm.examtype;
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (!checked) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} else {
alert(msg)
return false;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form id="ExamEntry" class="pure-form pure-form-aligned" method="post" action="success.html">
<div class="pure-control-group">
<label for="exNo">Exam Number:</label>
<input id="exNo" name="Exam_Number" required="required" pattern="\d{4}" title="You must enter a 4-digit exam number" />
</div>
<div class="pure-control-group">
<label>Exam type:</label>
<label class="pure-radio"><input type="radio" name="examtype" value="GCSE" /> GCSE</label>
<label class="pure-radio"><input type="radio" name="examtype" value="A2" /> A2</label>
<label class="pure-radio"><input type="radio" name="examtype" value="AS" /> AS</label>
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary" onclick="return validateForm();">Submit</button>
<button type="reset" class="pure-button">Reset</button>
</div>
</form>
</body>
</html>