Question

我是JavaScript的新手，我一直在做基于HTML和JavaScript的大学任务。在这项任务中，我被要求创建一些表格，以允许一个人注册某种形式的教育课程。我被要求使用HTML创建表单，并仅使用JavaScript验证条目。

我一直在努力弄清楚如何使用一个验证块验证多个表单输入（如果可能的话），我想验证firstname和familyname输入仅使用validateForm。

以下是我测试过的一段：

<head>
    <script>
        function validateForm() {
            var x = document.forms["nameform"]["firstname"].value;
            if (x == null || x == "") {
                alert("first name must be filled out");
                return false;
            }
        }
    </script>
</head>
<body>
    <form name="nameform" , action="demo_form.asp" , onsubmit="return validateForm()" , method="post">
<b>First name:</b> 
        <input type="text" name="firstname">
        <br>
<b>Family name:</b> 
        <input type="text" name="familyname">
        <br>
        <input type="submit" value="Submit">
    </form>
</body>

非常感谢任何帮助！

Answer 1

您可以检查所有输入，存储错误消息（如果有），如果甚至一次失败，则返回false。

即

function validateForm() {
    var x = document.forms["nameform"]["firstname"].value, errors = [];
    if (x == null || x == "") {
        errors.push("first name must be filled out");
    }
    x = document.forms["nameform"]["familyname"].value;
    if (x == null || x == "") {
        errors.push("family name must be filled out");
    }
    if(errors.length > 0) { // check if there were any errors
        alert(errors.join("\n")); // alert all messages together
        return false;
    }
}

Answer 2

<head>
<script>
function validateForm()
{
  var firstname=document.getElementById('txtfirstname');
  var familyname=document.getElementById('txtfamilyname');

   if (firstname.value=="")
       {
         alert("first name must be filled out");
         return false;
        }
  if (familyname.value=="")
     {
         alert("familyname must be filled out");
         return false;
     }

 }
</script>
</head>

<body>
<form name="nameform", action="demo_form.asp", onsubmit="return validateForm()", method="post">
<b>First name:</b> <input type="text" id="txtfirstname" name="firstname">
<br>
<b>Family name:</b> <input type="text" id="txtfamilyname" name="familyname">
<br>
<input type="submit" value="Submit">
</form>

</body>

Answer 3

只需将其存储在多个变量中并具有多个if语句：

<script>
    function validateForm() {
        // name the variables appropriately
        var firstname = document.forms["nameform"]["firstname"].value;
        var familyname = document.forms["nameform"]["familyname"].value;
        // check if either of them are correct, if not alert and return false.
        if (firstname == null || firstname == "") {
            alert("first name must be filled out");
            return false;
        } else if (familyname == null || familyname == ""){
            alert("family name must be filled out");
            return false;
        }
        return true;
    }
</script>

Answer 4

几种可能性......

<script>
function validateForm()
{
    var x=document.forms["nameform"]["firstname"].value;
    if (x==null || x=="")
    {
        alert("first name must be filled out");
        return false;
    }
    x=document.forms["nameform"]["lasttname"].value;
    if (x==null || x=="")
    {
        alert("last name must be filled out");
        return false;
    }
return true;
}
</script>

将在验证失败时为每个字段显示警报，如果所有字段都正常则返回true。

<script>
function validateForm()
{
    var errorString="";
    var x=document.forms["nameform"]["firstname"].value;
    if (x==null || x=="")
    {
        errorString+="first name must be filled out\n";
    }
    x=document.forms["nameform"]["lasttname"].value;
    if (x==null || x=="")
    {
        errorString+="last name must be filled out\n";
    }
    if(errorString=="")
    {
        return true;
    }
    else
    {
        alert(errorString);
        return false;
    }
}
</script>

将返回单个警报，列出验证失败的所有字段。

此外，我总是喜欢在验证失败的第一个字段上使用focus（）方法，将光标放在需要更正的字段中。

Answer 5

试试这个..

function validateForm() 
{
    var msg='';
    var flag=false;
        var x = document.forms["nameform"]["firstname"].value;
        if (x == null || x == "") 
        {
            flag = true;
            msg = ' First Name '
        }
        x = document.forms["nameform"]["familyname"].value;
        if (x == null || x == "") 
        {
            if(flag==true)
                msg = msg + 'And Family Name '
            else
                msg = msg +  ' Family Name ';
            flag = true;
        }
        if (flag==true) {
            msg = msg + " must be filled out";
        alert(msg);
        }
        return false;
}

JavaScript双表格验证

5 个答案: