我正在try 创建一个多登录表单,每一个都很好,但我想禁用下一步按钮,如果邮箱输入为空. 输入class="邮箱" 和按钮CLASS="btn-Next" 如有任何帮助,我将不胜感激,谢谢.

<sub>const pageBox = document.querySelector('.page-box');
const btnNext = document.querySelector('.btn-next');
const btnBack = document.querySelector('.btn-back');
const checkboxPass = document.querySelector('.checkbox-pass');
const passwordInput = document.querySelector('.password');
const loginTitle = document.querySelector('.loginTitle-text');
const userEmail = document.querySelector('.user-email');
const emailInput = document.querySelector('.email');

btnNext.onclick = (e) => {
    e.preventDefault();
    pageBox.classList.add('active-pass');
    setTimeout(() => passwordInput.focus(), 500);
    loginTitle.innerHTML = 'Welcome';
    userEmail.innerHTML = ''  + emailInput.value;
};

btnBack.onclick = (e) =>{
    e.preventDefault();
    pageBox.classList.remove('active-pass');
    loginTitle.innerHTML = 'Sign in';
    userEmail.innerHTML = 'Please continue,';
    emailInput.focus();
};

checkboxPass.onclick = () => {
    if(checkboxPass.checked) {
        passwordInput.type = 'text';
    }
    else{
       passwordInput.type = 'password';
    }
};
emailInput.addEventListener("btnNext", (e) => {
    preventDefault();
    btnNext.disabled()
    if(emailInput.value.length  > 0) {
        btnNext.disabled = 'true';
     }
     else{
        btnNext.disabled = 'false';
    } 
});
</sub>

推荐答案

  1. 没有btnNext事件,请使用input(当输入更改时)
  2. 根据输入值为按钮添加或删除disabled属性.

设置disabled="false"不能像解释的那样工作here.

const btnNext = document.querySelector('.btn-next');
const emailInput = document.querySelector('.email');

emailInput.addEventListener("input", () => emailInput.value.length ? btnNext.removeAttribute('disabled') : btnNext.setAttribute('disabled', ''));
<input type="email" class="email"/>
<button class="btn-next" disabled>Next</button>

Javascript相关问答推荐

Next.js Next/Image图像隐含性有任何类型-如何修复?

我试图实现用户验证的reduxstore 和操作中出了什么问题?

如何才能拥有在jQuery终端中执行命令的链接?

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

InDesign—创建一个独立的窗口,在文档中进行更正时保持打开状态

嵌套异步JavaScript(微任务和macrotask队列)

当作为表达式调用时,如何解析方法decorator 的签名?

更改JSON中使用AJAX返回的图像的路径

如何在模块层面提供服务?

为什么useState触发具有相同值的呈现

我可以使用使用node.js创建的本地主机来存储我网站上提交的所有数据吗?没有SQL或任何数据库.只有HTML语言

以Angular 实现ng-Circle-Progress时出错:模块没有导出的成员

如何在.NET Core中将chtml文件链接到Java脚本文件?

如何使用<;Link>;执行与JS Reaction中的";window.Location=/GameOverDied;";类似的操作?

未捕获语法错误:Hello World中的令牌无效或意外

FileReader()不能处理Firefox和GiB文件

与在编剧中具有动态价值的定位器交互

如何压缩图像并将其编码为文本?

如何处理不带参数的redux thunk payloadCreator回调函数?

使用Java脚本筛选数组中最接近值最小的所有项