表单验证（JavaScript），不确定为什么不起作用。 （没有错误，但没有出现消息框）
[英]Form Validation (JavaScript), unsure why it's not working. (No errors, but messagebox doesn't appear)
问题描述
Basically, I tried to add a form to my website and when the Confirm/Submit button is clicked, the program with check if the Name & e-mail form have to the correct information, otherwise a warning will be displayed. 
基本上，我试图向我的网站添加一个表单，然后单击“确认/提交”按钮，该程序会检查“姓名和电子邮件”表单是否具有正确的信息，否则将显示警告。
<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> </h4>
<p> </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>
2 个解决方案
解决方案1
0 2013-05-15 21:10:41
just indent your code and it should be fine, I would love to help, but without seeing the code there's not much i can do. 只是缩进您的代码，应该没问题，我很乐意提供帮助，但是如果看不到代码，我无能为力。 Maybe a link to the page on your site? 也许链接到您网站上的页面？
解决方案2
0 已采纳 2013-05-16 00:23:16
In your code: 在您的代码中：
> <script language="javascript" type="text/javascript">
The language attribute has been deprecated for about 15 years, the type attribute is no longer required, so: 不推荐使用language属性约15年，不再需要type属性，因此：
<script>
> function validateForm () {
> var x=document.forms["form1"]["name"].value;
It is handy to pass a reference to the form from the listener so the function can be more generic. 从侦听器传递对表单的引用很方便，因此该函数可以更通用。 Also, named form controls are added as named properties of the form. 此外，将命名表单控件添加为表单的命名属性。 If you have a control with a name that is the same as a form property, it will overwrite the form property so you can't access it as a property. 如果控件的名称与form属性相同，则它将覆盖form属性，因此您不能将其作为属性访问。 Much better to avoid standard property names for element names and IDs, so: 最好避免使用标准属性名称作为元素名称和ID，因此：
function validateForm(form) {
var x = form.userName.value
then: 然后：
> if (x == null || x == "") {
The value of a form control is a string, so x == null will never be true. 表单控件的值是一个字符串，因此x == null永远不会为true。 It's sufficient (and more suitable) to just test: 测试就足够了（并且更合适）：
if (x == "") {
[...] [...]
> function validateForm() {
If you declare multiple functions with the same name, each will overwrite the previous one so you are left with just the last one. 如果您声明多个具有相同名称的函数，则每个函数都会覆盖前一个函数，因此您只剩下最后一个。 You should have a single validation function that does the checks, though each check might be a separate function. 您应该只有一个验证功能来执行检查，尽管每个检查可能是一个单独的功能。
> 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;
> }
> }
You can use a regular expression to check the format of the e–mail address. 您可以使用正则表达式来检查电子邮件地址的格式。
> <form id="form1" name="form1" method="post" action="post">
There generally isn't a need for ID and name attributes on a form, typically just an ID is used. 通常不需要表单上的ID和名称属性，通常只使用一个ID。 For other form controls, a name is required for them to be successful, there is rarely a need for them to have an ID. 对于其他表单控件，要成功使用它们需要一个名称，很少需要它们具有ID。
The validation function can be called from the form's submit event, so: 可以从表单的Submit事件中调用验证函数，因此：
<form id="form1" onsubmit="validateForm(this);" ...>
[...] [...]
> <input type="text" name="name" id="name" />
Don't use XML markup in an HTML document. 不要在HTML文档中使用XML标记。 And don't use element names that are the same as form attribute names as they will make the related form property inaccessible. 并且不要使用与表单属性名称相同的元素名称，因为它们会使相关的表单属性无法访问。
</p>
<p>
<label for="e-mail">E-mail:</label>
<br />
Message: 信息：
If that is a submit button, then make it type submit. 如果那是一个提交按钮，则使其键入提交。 It doesn't need a name or ID if it's value isn't to be submitted: 如果不需要提交，则不需要名称或ID：
<input type="submit" value="Submit">
So your form and code can be: 因此，您的表格和代码可以是：
function validateForm(form) {
var reUserName = /\w+/; // User name has some letters
var reEmail = /.+@..+\..+/; // 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;
}
Note that the e–mail validation is just what you have, which is not particularly thorough. 请注意，电子邮件验证正是您所拥有的，并不是特别彻底。
Then the form: 然后是表格：
<form onsubmit="return validateForm(this);">
Name: <input name="userName"><br>
E-mail: <input name="eMail"><br>
<input type="submit">
</form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.