javascript – 使用空输入值停止提交

前端之家收集整理的这篇文章主要介绍了javascript – 使用空输入值停止提交前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找一个简单的解决方案来阻止登录表单提交空输入字段.表格的代码如下.如果可能的话,我想使用一个简单的 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>

如果可能的话,我还想改变空场的边界.

提前致谢.

解决方法

带有虚拟检查的示例代码
<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>

猜你在找的JavaScript相关文章