0

基本上，我尝试向我的网站添加一个表单，当单击“确认/提交”按钮时，程序会检查名称和电子邮件表单是否必须包含正确的信息，否则将显示警告。

<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>
4

2 回答 2

0

只需缩进您的代码，它应该没问题，我很乐意提供帮助，但是没有看到代码，我无能为力。也许是指向您网站上页面的链接？

于 2013-05-15T21:10:41.360 回答
0

在您的代码中：

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

language 属性已被弃用大约 15 年，不再需要 type 属性，因此：

<script>

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

从侦听器传递对表单的引用很方便，因此函数可以更通用。此外，命名的表单控件被添加为表单的命名属性。如果您有一个名称与表单属性相同的控件，它将覆盖表单属性，因此您无法将其作为属性访问。避免元素名称和 ID 的标准属性名称要好得多，因此：

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 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-16T00:23:16.817 回答