js验证非空字段答案

【问题标题】：js validation of not null fieldjs验证非空字段
【发布时间】：2014-06-17 20:39:38
【问题描述】：

我已经做了一个登录页面。我希望我的 js validateForm() 函数在用户遗漏用户名或密码时提醒他们。这是我目前得到的代码。

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["username"].value;
if (x==null || x=="")
  {
  alert("Please enter username");
  return false;
  }
}
</script>
</head>
<div class="users form">
<br>


<form name="myform" action="Employees/login" onsubmit="return validateForm()" method="post" >
<?php

    if (isset($error)) {


    echo "<p style='color:red;font-size: 20px''>Username or Password is invalid. Please try again.</p>";


        }?>
        <p>Enter Username:
        <input type="text" name="username" placeholder="username" style="height: 25px;width: 160px;"/></p>
        <br><br>
        <p>Enter Password:
        <input type="password" name="password"  placeholder="password" style="height: 25px;width: 160px;"/></p>
        <br>
        <input type="submit" style="height:35px;width:100px;font-size: 18px; align:center;" value="Sign in">

   </form>
</div>

目前它不起作用，我认为问题出在代码行 "var x=document.forms["myForm"]["username"].value;"有人可以帮忙吗？

【问题讨论】：

标签： javascript validation

【解决方案1】：

问题是forms["myForm"]，您使用了大写的F，而实际上您的表单名称都是小写的，所以应该是：

var x=document.forms["myform"]["username"].value;
//                      ^ lowercase

不是问题的一部分，但您可能更喜欢使用不显眼的 JavaScript 来设置 onsubmit 处理程序，而不是在 HTML 属性中：

window.onload = function(){
    document.forms["myform"].onsubmit = validateForm;
};

现在，在validateForm 中，您可以使用this 而不是手动查找表单。

function validateForm()
{
    var x = this["username"].value;
    ...
}

【讨论】：

感谢您的帮助，现在可以使用了。顺便说一句，有什么方法可以向警报框添加样式吗？我希望警报中的文本为红色且尺寸更大。
警报框无法设置样式，看看比警报更好的Boostrap Modals，可以设置样式：getbootstrap.com/javascript/#modals