Javascript 根据有效电子邮件删除提交按钮的类别

我有一个提交按钮的取消订阅页面，我想删除一个“禁用”类按钮时，用户输入一个有效的电子邮件。到目前为止，我已经根据“输入”来切换类，这种方式有效，但我更希望用户必须输入有效的电子邮件来删除“禁用”类。我正在使用jquery验证进行验证，我只是不知道如何使用jquery验证输入创建buttons类切换。有什么想法吗

HTML:

jQuery验证：

($unsubscribeForm.length) {
    $unsubscribeForm.validate({
        errorClass: 'has-error',
        errorElement: 'span',
        debug: true,
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: {
                required: 'An email address is required.',
                email: 'Please provide a valid email address.'
            }
        }
    });
}

---

由于您已经在使用HTML输入类型“email”，因此可以利用现代浏览器的集成表单验证。对输入元素调用

checkValidity（）

，将告诉您浏览器是否将其当前值视为有效值。使用此选项可以删除该类或将其添加到按钮。在本演示中，我还演示了如何添加/删除禁用的属性。它更倾向于简单地使用一个类，因为您仍然可以单击按钮，即使它有禁用的类

$（document.querySelector（'input[type=“email”]））。on（'input'，function（）{
//使用此选项可添加/删除类
$（'#unsubscribe submit'）[this.value.length&&this.checkValidity（）？'removeClass'：'addClass']（'disabled'）；
//或单击此按钮添加/删除禁用的属性
$（'#unsubscribe submit'）.attr（'disabled'，this.value.length&！this.checkValidity（））；
});
。已禁用，
按钮[禁用]{
不透明度：0.5；
光标：不允许；
}

提交
通过HTML5验证，您甚至不需要JavaScript来更改按钮。使用输入电子邮件并将其设置为必需。如果无效，则表单无效，您可以将其作为按钮的目标来设置样式


表单：无效按钮{
颜色：红色；
}

提交
我不明白你要什么。这是一个可以帮助你的方法。感谢链接：）……我让jqueryvalidate按照预期的方式验证表单。页面登录上的提交按钮为“禁用”。当用户输入一封有效的电子邮件时，我想删除类“disabled”，而不是“input”。我不确定，但那只是document.getElementById（unsubscribe submit）.classList.remove（'disabled'）；
$($emailInput).on('input', function() {
    $('#unsubscribe-submit').toggleClass('disabled', this.value.trim().length === 0);
});

($unsubscribeForm.length) {
    $unsubscribeForm.validate({
        errorClass: 'has-error',
        errorElement: 'span',
        debug: true,
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: {
                required: 'An email address is required.',
                email: 'Please provide a valid email address.'
            }
        }
    });
}