我正在寻找一个简单的解决方案来阻止登录表单提交空输入字段.表格的代码如下.如果可能的话,我想使用一个简单的
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>
