0

我有以下代码，需要获取一个警报，该警报将指定哪些字段为空或空，并为每个空或空字段返回一个警报。我是 JavaScript 新手，在这方面遇到了很多困难。有人可以给我一些建议吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
    function checkForm(form){
        var len = form.length;

        //create for loop
        for (var i=0; i<len; i++){
            if (form.elements[i].type=="text" || form.elements[i].type==null){
                if (form.fax number.value=="" || form.fax number.type==null){
                    alert("Please fill out the fax number field");
                }
            }
        }
    }

    function emailTest(emailText){
        var email = emailText.value;
        var emailPattern = /^.+@.+\..{2,}$/;
        if (!(emailPattern.test(email))) {
            alert("Please enter a valid email address.");
            document.myForm[1].focus();
        }
    }
// -->
</SCRIPT>

</HEAD>

<BODY>
<H3>Assignment 2 Form</H3>
<HR>

<FORM NAME="myForm" METHOD="post"
ACTION="mailto:joeschmoe@blahblah.ca">
    Name:<BR>
    <INPUT TYPE="text" size="30" NAME="name"><br>
    Email address:<BR>
    <INPUT TYPE="text" size="30" NAME="email address" onBlur="emailTest(this);"><br>
    Phone number:<BR>
    <INPUT TYPE="text" size="30" NAME="phone number"><br>
    Fax number:<BR>
    <INPUT TYPE="text" size="30" NAME="fax number"><p>
    <INPUT TYPE="submit" VALUE="Submit Data" onClick="return checkForm(this.form);">
    <INPUT TYPE="reset" VALUE="Reset Form">
</FORM>

</BODY>
</HTML>
4

1 回答 1

1

好吧……哇。我在这上面花了太多时间。您的表单应如下所示：

<FORM NAME="myForm" id="myForm">
<label for="name">Name:</label><br />
    <INPUT TYPE="text" size="30" NAME="name" /><br />
<label for="email_address">Email address:</label><BR />
    <INPUT TYPE="text" size="30" NAME="email_address" /><br />
<label for="phone_number">Phone number:</label><BR /> 
    <INPUT TYPE="text" size="30" NAME="phone_number" /><br />
<label for="fax_number">Fax number:</label><BR />
    <INPUT TYPE="text" size="30" NAME="fax_number" /><br />
    <INPUT TYPE="button" VALUE="Submit Data" onClick="return checkForm()" />
    <INPUT TYPE="reset" VALUE="Reset Form" />
</FORM>

表格摘要：

  • 您应该为表单元素使用标签
  • 切勿在名称属性或任何标识属性（名称、类、id）中使用空格
  • inputs 应该以/>任何没有结束标签的标签结尾（<br />也是）
  • 我退出了该onBlur事件，并将其添加为整个验证过程的一部分。不需要太复杂
  • 我使用button输入类型而不是submit输入类型。在 JavaScript 中了解原因

然后是你的 JavaScript：

function checkForm() {
    var valid = false; //Set a boolean variable that will be changed on each block 
                       //of validation
    if (document.myForm.fax_number.value === "") {
        alert("Please fill out the fax number field");
    }

    if (document.myForm.email_address.value === "") {
        alert("Email address is required");
    } else {
        valid = emailTest(document.myForm.email_address.value);
    }

    //all other checks within if statements

    if (valid) {
        document.myForm.action = "mailto:soandso@so.com";
        document.myForm.submit();
    }
}

function emailTest(emailText) {
    var emailPattern = /^.+@.+\..{2,}$/;
    var ret = false;
    if (!(emailPattern.test(emailText))) {
        alert("Please enter a valid email address.");
    } else {
        ret = true;
    }
    return ret;
}

Javascript 总结

  • 在与 HTML 表单交互的 JavaScript 中，表单是这样调用的：form 标签属性中的字符串document.formNamewhere或页面上表单的数字实例where是，即页面上的第一个表单是，因此它是称为formNamename=""document.forms[i]ii = 0document.forms[0]
  • 检查每个inputby以name查找s属性中的字符串在哪里。valuedocument.myForm.(elementName).valueelementName<input>name
  • 我没有使用 ，而是submit使用了常规button. 单击表单中的“提交数据”按钮时，它会运行checkForm()以确保一切有效
  • 如果一切都有效，它会为表单分配一个动作，document.myForm.action=youraction然后通过 JavaScript 提交它document.myForm.submit()

笔记

  • 永远不要使用W3Schools来学习任何东西。
  • 在此处阅读有关表格的更多信息
于 2013-03-18T00:46:46.257 回答