用javascript验证html表单

基本上，我想验证这个表单，我试图用

document.getElementByid（）来验证它但它不起作用。有人能帮我解决这个问题吗？为什么它没有按照我正在尝试的方式进行

 <form name="simple" action="POST">

            <label for="name">
                Name:
            </label>
            <input type="text" id="demo" class="form-control" onsubmit="validate();"><br>

            <label for="email">
                E-mail:
            </label>
            <input type="email" id="email" class="form-control"><br>

            <label for="pwd">
                Password:
            </label>
            <input type="password" id="pwd" class="form-control"><br>

            <label for="phone">
                Phone:
            </label>
            <input type="text" id="phone" class="form-control"><br>

            <input type="button" type="submit" value ="Submit" class="form-control" onclick="validate();" >

            <input type="button" type="reset" value ="Reset" class="form-control">

        </form>
        <script>


        function validate()
    {
        var txt = document.getElementById("demo");
        alert(txt);
        if(txt == " " || txt == null)
        {
            alert("Name can't be left blank");
        }

    }
        </script>


姓名：


电邮：


密码：


电话：


函数验证（）
{
var txt=document.getElementById（“演示”）；
警报（txt）；
如果（txt==“”| | txt==null）
{
警报（“名称不能为空”）；
}
}
为了获取字段的值，必须访问元素的
.value
字段，如下所示：
document.getElementById（'demo'）.value

为了捕获
submit
事件，必须在表单上设置
onsubmit
函数，如下所示：

document.getElementById("myform").onsubmit = validate;

在validate函数中，必须调用
返回false如果输入无效：

if (txt === null || txt.trim() === '') {
    alert("Name can't be left blank");
    return false;
}

此外，如果要进行验证，请查看
输入
元素的
模式
和
必需
属性。所有现代浏览器都会尊重您使用这些属性设置的规则，您无需手动验证


使用这个

function validate() {
  txt = document.getElementById("demo");
  alert(txt);
  if(txt.value.trim() == "" || txt.value == null)
  {
      alert("Name can't be left blank");
  }
}

注意：关键字
var
不在
txt
变量之前。
值
获取id为
demo
的输入字段的值。
trim（）
函数修剪前导/尾随空格，以确保输入的不仅仅是空格字符。
@user337554是正确的，我只想向您展示另一种方法，当我们关注表单/字段处理时，这是有效的

使用传统形式的JavaScript，您可以使用表单的
onsubmit
事件触发验证，并等待它返回以继续或不继续使用所需的POST/GET

DOM节点结构使您能够使用类似于
document.form\u name.field\u name
的内容，通过其各自的名称访问字段

在我的示例中，我已将表单本身作为参数传递给验证函数，因此您将把它作为本机DOM表单对象处理，并包含它的所有特性和子对象

希望它能帮助您考虑代码中的可能性，我喜欢它，因为我可以使它更干净，并且我可以使用DOM树而不是数百万
getElementByID

您可以运行下面的代码，它可以工作：


/**
*由窗体的onsubmit事件触发
*/
函数验证（表单）
{
console.info（“开始验证…”）；
//通过从表单到输入名称的DOM节点序列验证字段
如果（form.demo.value==“”）
{
警报（“名称不能为空”）；
return false；//退出帖子
}
如果（form.email.value==“”）
{
警报（“电子邮件不能留空”）；
return false；//退出帖子
}
如果（form.pwd.value==“”）
{
警报（“密码不能为空”）；
return false；//退出帖子
}
如果（form.phone.value==“”）
{
警报（“电话不能留空”）；
return false；//退出帖子
}
控制台信息（“完成！”）；
//形式还可以
返回true；
}

姓名：


电邮：


密码：


电话：


你的开场白标签在哪里？这就是onsubmit应该解决的问题。问题不在于此，问题主要在于-当我们从输入名称字段输入数据时，它会打印数据，但当我提交空白名称字段时，它不会给出任何输出。即使使用document.getElementById（“demo”）。值，它也不起作用。我想用js而不是html进行验证。我编辑了上面的答案，并提供了关于如何捕获提交事件的额外信息（以便您可以阻止或接受它）。它现在还检查输入是否确实为空（以前，它只检测到输入是否为单个空格字符）。谢谢这项工作。您能解释一下我们为什么使用txt.trim（）吗？？函数
.trim（）
从字符串的两侧删除空格（和其他类似字符，如换行符）。因此，如果用户键入一个或多个空格，这仍将注册为空字符串。任何只包含空格（
“
”）的字符串将变为空字符串（“”），并且它将与
if
中的条件匹配。