我想问如何通过js获取验证表单

Question

我正在运行这段代码。 在这里，我在按下提交按钮后尝试获取错误声明，但在 html web 页面上输入 2 个字母后无法收到任何错误通知（name.length<5 将给出错误通知）。 但是，我什么也没得到。 有人可以查看此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content ="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title> practice</title>
</head>
    <body>
        <h1><b>Welcome to the your page.</b></h1>
        <form  action="#" name="myForm" 
        method="post" onsubmit="return validateForm()">
         
         
         
        What is your name?:
        <input id="name" type="text" name="fname"  placeholder="Required" required> 
        <span class ="formerror"></span>
        
        <input type="submit" value="Submit"> 
    </form>
    </body>
    <script>
        function seterror(id,error)
        {
            element= document.getElementById(id);
            element.getElementsByClassName
            ("formerror")[0].innerHTML=error;

        }
        function validateForm(){
            var returnval = true;

            var name = document.forms['myform']["fname"].value;
            if(name.length<5)
            {seterror("fname","length of name is too short");
            returnval = false;}

          //console.log('name sf');
          //return false;
          return returnval;
        }

    </script>
    </html>

Answer 1

一种方法是在输入上使用minLength (1)属性：

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content ="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> practice</title> </head> <body> <h1><b>Welcome to the your page.</b></h1> <form action="#" name="myForm" method="post" onsubmit="return validateForm()"> What is your name?: <input id="name" type="text" name="fname" placeholder="Required" required minLength="5"> <span class ="formerror"></span> <input type="submit" value="Submit"> </form> </body>

Answer 2

首先，您的seterror function 有问题，但错误无法到达控制台，因为您的表单将始终提交。 无论。 因此，要查看发生了什么，您应该防止默认行为：

onsubmit="event.preventDefault();return validateForm()"

然后你会得到一个错误： Cannot read properties of undefined (reading 'fname') 。

// 'myform' should be 'myForm'
document.forms['myform']

你的错误 #2: Uncaught TypeError: Cannot read properties of null (reading 'getElementsByClassName') 。

// 'element' should be 'document'
element.getElementsByClassName("formerror")[0].innerHTML = error;

完整的工作代码：

function seterror(id, error) {
    document.getElementsByClassName("formerror")[0].innerHTML = error;
}

function validateForm() {
    var returnval = true;

    var name = document.forms['myForm']["fname"].value;
    if (name.length < 5) {
        seterror("fname", "length of name is too short");
        returnval = false;
    }

    return returnval;
}

下一步

不要使用内联事件处理程序，它们更难使用。 相反，您应该使用.addEventListener()以现代方式处理事件。

我想问如何通过js获取验证表单

问题描述

2 个解决方案

解决方案1
0 2022-07-31 06:11:04

解决方案2
0 2022-07-31 06:27:45

我想问如何通过js获取验证表单

问题描述

2 个解决方案

解决方案1 0 2022-07-31 06:11:04

解决方案2 0 2022-07-31 06:27:45

解决方案1
0 2022-07-31 06:11:04

解决方案2
0 2022-07-31 06:27:45