时间戳

首页 > 解决方案 > AJAX：禁用提交按钮，直到用户名字段充满电子邮件

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

问题描述

我的登录页面有三件事：

  1. 用户名字段
  2. 密码字段
  3. 提交按钮

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

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

此外，在用户名字段中写入内容并将其清除后，提交按钮不会自行禁用。我希望提交按钮在清除用户名字段后自行禁用。

$(':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);
    }
 });

标签： javascripthtmlajax

解决方案

一个纯 js 解决方案是：

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")
}
<form>
<input type="email">
<input type="password">
<input type="submit" disabled>
</form>

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

推荐阅读