Question

我的登录页面有三件事：

用户名
密码字段
提交按钮

如果用户名字段不为空，此代码将禁用提交按钮。

我要禁用提交按钮，直到用户名字段填充了电子邮件。

此外，在用户名字段中写了一些内容并清除它后，提交按钮不会自行禁用。清除用户名字段后，我希望提交按钮自动禁用。

$(':input[type="submit"]').prop('disabled', true);
 $('input[type="email"]').keyup(function() {
    if($(this).val() != '<!-- not sure what to put here -->') {
       $(':input[type="submit"]').prop('disabled', false);
    }
 });

Answer 1

纯粹的js解决方案是：

＆＃13;

document.querySelector("input[type=email]").onkeyup = function(){
let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
(this.value.length==0 || reg.test(this.value)==false)?document.querySelector("input[type=submit]").setAttribute("disabled","disabled"):document.querySelector("input[type=submit]").removeAttribute("disabled")
}

＆＃13;

<form>
<input type="email">
<input type="password">
<input type="submit" disabled>
</form>

＆＃13;

每当释放一个键时，它会检查输入值或输入模式的长度。如果长度为零或模式不匹配，则将disabled属性设置为disabled。如果没有，则删除完全禁用的属性。

Answer 2

您可以使用RegEx验证电子邮件。如果条件为false，则必须按以下方式禁用该按钮：

＆＃13;

let button = $(':input[type="submit"]');
button.prop('disabled', true);
$('input[type="email"]').keyup(function() {
  if(validateEmail($(this).val())) {
     button.prop('disabled', false);
  }
  else{
    button.prop('disabled', true);
  }
});
 
function validateEmail(email) {
  var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email"/>
<input type="submit" value="Submit"/>

＆＃13;

AJAX：禁用提交按钮，直到用户名字段填充电子邮件

2 个答案: