0

我有坚果要破解，这让我头疼了一段时间。

我是编程初学者，这是为了介绍。我尝试实现 JS 表单验证，检查输入字段email，password如果它符合某些条件，则取消"disabled"登录按钮上的属性。

我尝试了我的 JS 代码的组件，它工作得很好，但是当我将它合并到 functionvalidate()时，它就是不工作，我找不到原因。

这是我的 HTML：

<!DOCTYPE html>
<head>
  <meta charset='UTF-8' />
  <title>$title</title>
  <link href='css/style.css' rel='stylesheet' type='text/css' />
  <script type='text/javascript' charset='utf-8' src='js/validateInput.js'></script>
</head>
<body>
  <div id='header'><h1>$title<h1></div>
  <form name='login' method='post' action=''>
    <table border='0'>
      <tr>
        <th>E-mail:</th>
        <td colspan='2'><input type='text' name='email' id='email' size='30' value='$posted_email'
     onkeyup='validate()' onclick='validate()' onchange='validate()' />
        </td>
      </tr>
      <tr>
        <th>Heslo:</th>
        <td><input type='password' name='pword' id='pword' size='21'
          onkeyup='validate()' onclick='validate()' onchange='validate()'/></td>
        <td><input type='submit' name='login' class='submit' id='loginBtn' value='OK' /></td>
      </tr>    
    </table>
  </form>
</body>

现在我的JS：

function $(id) {
  if (id.indexOf('#') == 0 || id.indexOf('.') == 0) {
    var name = id.substr(1);
    return id.indexOf('#') == 0 ? document.getElementById(name) : document.getElementsByClassName(name);
  }
  return (typeof document.getElementById('id') !== 'undefined') ? document.getElementById(id) : document.getElementsByClassName(id);
}
function validateEmail(string) {
  var re = /[\w\s\.\$\*\+\/\?\^\{\|\}\(\)]{1,64}@[\w]{1,250}\.[\w]{2,3}/;
  return re.test(string);
}

function validate() {
  var login = $('#loginBtn');
  var email = $('#email');
  var pword = $('#pword');
  if (!validateEmail(email.value)) {
    email.style.color = 'orange';
  } else if (pword.length > 0) {
    login.disabled = false;
  }
  return false;
}
window.onload = function() {$('#loginBtn').disabled = true;};

有什么想法吗？

4

1 回答 1

0

问题出在这种情况下：

  if (!validateEmail(email.value)) {
    email.style.color = 'orange';
  } else if (pword.length > 0) {
    login.disabled = false;
  }

将您的函数 validate() 更改为以下：

function validate() {
    var login = $('#loginBtn');
    var email = $('#email');
    var pword = $('#pword');
    var result = false;

    if (!validateEmail(email.value)) {
        email.style.color = 'orange';
    } else {
        email.style.color = 'black';
        result = true;
    }
    if (result && pword.value.length > 0) {
        login.disabled = false;
    } else {
        login.disabled = true;
    }
}

小提琴演示。

希望这会有所帮助。

于 2013-07-20T15:59:39.690 回答