基本的javascript验证?

时间:2014-03-12 18:54:24

标签: javascript html validation

你好,首先我是非常新的编码所有我已经做了几个html网站所以在这里我试图让javascript验证一个文本框,看看它是否有任何数据被归入其中,但此刻它当我点击提交时,什么都不做?

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

function validateForm() {
            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.Examination number.value=="") {
            msg+="You must enter your Examination number \n";
            document.ExamEntry.Examination number.focus();
            document.getElementById('Examination number').style.color="red";
            result = false;
}

if(msg==""){
return result;
}
{
alert(msg)
return result;                
}
</script>

<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<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" name="Examination number" /></td>
            </tr>

            <tr>
                            <td><input type="submit"
name="Submit" 
value="Submit"  
onclick="return validateForm();" /></td>
                            <td><input type="reset" name="Reset" value="Reset" /></td>
            </tr>
</table>

2 个答案:

答案 0 :(得分:0)

您的代码中有很多错误。

1-不要在任何html属性中放置空格。 document.ExamEntry.Examination number.value会导致javascript错误。这适用于idname

2-

中也有语法错误
if(msg==""){
return result;
}
{
alert(msg)
return result;

这可能就是你要做的事情:

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

    return result;

3-您在language="javascript""

中有两个结束引号

4-您不应该在按钮上调用此“onclik”,而是form本身上的“onsubmit”

5-你有2个</body>标签

以下是您的工作代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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;
    }

    if (document.ExamEntry.Examination_number.value=="") {
        msg+="You must enter your Examination number \n";
        document.ExamEntry.Examination_number.focus();
        document.getElementById('Examination_number').style.color="red";
        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" name="Examination_number" /></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>

答案 1 :(得分:0)

我建议您通过示例执行此操作:

<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
  {
  alert("First name must be filled out");
  return false;
  }
}
</script>

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

source