表单验证（JavaScript），不确定为什么它不起作用。（没有错误，但消息框没有出现）

基本上，我试图添加一个表单到我的网站，当确认/提交按钮被点击时，程序检查名称&电子邮件表格是否正确信息，否则会显示警告。表单验证（JavaScript），不确定为什么它不起作用。（没有错误，但消息框没有出现）

<script language="javascript" type="text/javascript"> 
function validateForm() 
{ 
var x=document.forms["form1"]["name"].value; 
if (x==null || x=="") 
    { 
    alert("Please enter your name"); 
    return false; 
    } 
} 
function validateForm() 
{ 
var x=document.forms["form1"]["e-mail"].value; 
var atpos=x.indexOf("@"); 
var dotpos=x.lastIndexOf("."); 
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) 
    { 
    alert("Please enter your e-mail address"); 
    return false; 
    } 
} 
</script> 
</head> 
<body> 

    <h2>Form</h2> 
    <p>Note: Please fill in the following fields below, thank you.</p> 
    <form id="form1" name="form1" method="post" action="post"> 
     <p> 
     <label for="name">Name:</label> 
     <br /> 
     <input type="text" name="name" id="name" /> 
     </p> 
     <p> 
     <label for="e-mail">E-mail:</label> 
     <br /> 
<input type="text" name="e-mail" id="e-mail" /> 
     </p> 
     <p> 
     <label for="msg">Message:</label> 
     </p> 
     <p> 
     <textarea name="msg" id="msg" cols="45" rows="5"></textarea> 
     </p> 
     <p> 
     <input type="button" name="Confirm" id="Confirm" value="Submit" /> 
     </p> 
     <!-- end .content --> 
    </form> 
    </div> 
    <div class="sidebar2"> 
    <h4>&nbsp;</h4> 
    <p>&nbsp;</p> 
    <p><!-- end .sidebar2 --></p> 
    </div> 
    <div class="footer"> <img src="pics/copyright.gif" width="960" height="100" alt="footer" /></div> 

<!-- end .container --></div> 
</body> 
</html>

来源

2013-05-15 Boats

我必须补充，我不知道如何发布我的代码，因为它不断地说我做某某它，再加上我没有张贴图片，因为我没有足够的代表。 – Boats

艰难的打破兄弟。太糟糕了，你根本没有提供任何信息，否则我们可能会提供帮助。 – PlantTheIdea

你可以发表一些代码 – user1

在您的代码：

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

语言属性已弃用了大约15年，type属性不再是必需的，因此：

<script> 

> function validateForm() { 
>  var x=document.forms["form1"]["name"].value;

这是很方便的传递引用从监听器到表单，所以函数可以更通用。另外，命名表单控件被添加为表单的命名属性。如果您的控件的名称与表单属性相同，则它将覆盖表单属性，因此您无法将其作为属性进行访问。更好的避免了元素的名称和标识的标准属性名称，所以：

function validateForm(form) { 
    var x = form.userName.value

则：

>  if (x == null || x == "") {

表单控件的值是一个字符串，所以x == null永远不会为真。这是足够了（更适合），只是测试：

if (x == "") {

[...]

> function validateForm() {

如果您声明多个函数具有相同的名称，每次都会覆盖前一个，所以你留下只有最后一个。您应该有一个可以执行检查的验证功能，尽管每次检查都可能是一个单独的功能。

> var x=document.forms["form1"]["e-mail"].value; 
> var atpos=x.indexOf("@"); 
> var dotpos=x.lastIndexOf("."); 
> if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) 
> { 
> alert("Please enter your e-mail address"); 
> return false; 
> } 
> }

您可以使用正则表达式来检查电子邮件地址的格式。

> <form id="form1" name="form1" method="post" action="post">

通常不需要表单上的ID和名称属性，通常只使用一个ID。对于其他表单控件，需要一个名称才能成功，因此很少需要他们拥有一个ID。

验证功能可以从表单的提交事件被调用，所以：

<form id="form1" onsubmit="validateForm(this);" ...>

[...]

>  <input type="text" name="name" id="name" />

不要在HTML文档中使用的XML标记。并且不要使用与表单属性名称相同的元素名称，因为它们会使相关表单属性无法访问。

</p> 
    <p> 
    <label for="e-mail">E-mail:</label> 
    <br />

消息：

如果这是一个提交按钮，然后使它键入提交。它并不需要一个名字或ID，如果它的值不提交：

<input type="submit" value="Submit">

所以你的形式和代码可以是：

function validateForm(form) { 
    var reUserName = /\w+/; // User name has some letters 
    var reEmail = /[email protected]+\..+/; // email has some characters, @, then a dot near the end 
    var passed; 

    if (!reUserName.test(form.userName.value)) { 
     passed = false; 
     // show message for user name 
    } 
    if (!reEmail.test(form.eMail.value)) { 
     passed = false; 
     // show message for email 
    } 
    return passed; 
}

注意，电子邮件验证只是你有什么，这不是特别彻底。

然后形式：

<form onsubmit="return validateForm(this);"> 
    Name: <input name="userName"><br> 
    E-mail: <input name="eMail"><br> 
    <input type="submit"> 
</form>

来源

2013-05-16 00:23:16 RobG

非常感谢:)这是非常有益的，你穿过每个部分。 – Boats

不幸的是，代码没有做任何事情，我的页面只是刷新并清除所有字段。 – Boats

只是缩进你的代码，它应该没问题，我很乐意提供帮助，但没有看到代码就没有多少我可以做的。也许链接到您网站上的网页？

来源

2013-05-15 21:10:41

这是真正的问题之一，我不确定是否缩进它，因为我做了一些缩进，它继续说我需要进一步缩进 – Boats

表单验证（JavaScript），不确定为什么它不起作用。 （没有错误，但消息框没有出现）

回答

相关问题

表单验证（JavaScript），不确定为什么它不起作用。（没有错误，但消息框没有出现）