使用空输入值停止提交答案

【问题标题】：Stop Submit With Empty Input Values使用空输入值停止提交
【发布时间】：2009-07-25 18:55:45
【问题描述】：

我正在寻找一种简单的解决方案来阻止登录表单提交空输入字段。表单的代码如下。如果可能的话，我想使用一个简单的 Javascript 解决方案。

<form id="login" method="post" action=""> 
    <input type="text" name="email" id="email" /> 
    <input type="password" name="pwd" id="pwd" /> 
    <button type="submit" id="submit">Login</button>
</form>

如果可能，我还想更改空白字段的边框。

提前致谢。

【问题讨论】：

标签： javascript forms login user-input

【解决方案1】：

带有虚拟检查的示例代码：

<script type="text/javascript">
function checkForm(form) {
    var mailCheck = checkMail(form.elements['email']),
        pwdCheck = checkPwd(form.elements['pwd']);
    return mailCheck && pwdCheck;
}

function checkMail(input) {
    var check = input.value.indexOf('@') >= 0;
    input.style.borderColor = check ? 'black' : 'red';
    return check;
}

function checkPwd(input) {
    var check = input.value.length >= 5;
    input.style.borderColor = check ? 'black' : 'red';
    return check;
}
</script>

<style type="text/css">
#login input {
    border: 2px solid black;
}
</style>

<form id="login" method="post" action="" onsubmit="return checkForm(this)"> 
    <input type="text" name="email" id="email" onkeyup="checkMail(this)"/> 
    <input type="password" name="pwd" id="pwd" onkeyup="checkPwd(this)"/> 
    <button type="submit" id="submit">Login</button>
</form>

【讨论】：

【解决方案2】：

可能的方法：

将操作设置为#
将处理程序添加到提交按钮或表单的onsubmit
如果文本字段不为空，则更改表单的操作

编辑：为了使这对非javascript用户也能工作，在页面加载时插入#-action。

【讨论】：

别忘了加上return false；在您的 onsubmit 处理程序中，如果文本字段为空。另外，查看 jQuery Validation 插件以获得更好的表单验证方法：docs.jquery.com/Plugins/Validation
你是对的，返回 false。但是我在这个问题中没有看到任何关于 jQuery 的东西 ;-)
如果可能的话，您能否提供一个示例来说明您的意思。我对 JS 有点陌生。我的根是 xHTML 和 CSS。

【解决方案3】：

为了尽量减少我会使用：

<form id="login" method="post" action="" onSubmit="if (this.email.value == '' || this.pwd.value == '') {return false;}">

允许 - 不会指出用户有什么问题，但会很有效。

【讨论】：