Javascript 我必须使用正则表达式来验证表单的几个部分

对于这个项目，我必须创建一个比萨饼递送表单。有多个步骤，第一部分是创建验证用户输入的表单。到目前为止，我已经能够部分解决这个问题。我的问题是 1：是否有更简洁的验证方法？ 2：我正试图让提交按钮只在所有字段都经过验证后才会出现，但是，我不知道怎么做。 下面是我的GitHub链接

---

因为这看起来像是一项作业，我已经尽了最大的努力给出提示，而不仅仅是给你答案

. 您可以使用它更容易地对照正则表达式检查输入，而不需要任何Javascript。 . 您可以使用此设置无效元素的样式，而不是直接在事件侦听器中应用样式。您还可以使用它来设置整个表单以及任何子元素的样式。如果任何输入无效，这将是我首选的隐藏submit按钮的解决方案。 在这种情况下，你的老师可能希望你使用Javascript进行验证，在这种情况下，你可以改变一些事情，让你的生活更轻松一些

您可能已经注意到，您有很多重复的代码，您可以将这些代码提取到它自己的函数中，该函数接受要检查的输入，并使用正则表达式对其进行检查，并根据正则表达式是否匹配应用正确的样式。完成后，您可以使用正确的正则表达式和元素在每个事件侦听器中调用函数

如果您突然决定将无效输入设置为红色边框，而不是橙色边框，会发生什么情况？现在，您必须返回并更改代码中的每个函数。要纠正这种情况，可以添加和删除.valid/.invalid之类的类来设置输入样式

如果使用.valid类，则很容易检查所有内容是否有效。您可以检查是否存在任何具有.invalid的元素，也可以检查您的每个输入是否都具有.valid

---

验证的最佳实践是使用jquery验证插件。易于使用且表单验证功能强大。

请您的问题在问题正文中直接显示相关代码。关于你问题的第1部分，更好是一个意见问题，最好继续问下去。我建议你在互联网上搜索Javascript验证库，如果你决定不使用任何验证库，你也可以使用jQuey来简化DOM操作。@Dhyey是的，我已经在线浏览了各种regex页面。我不能使用jQuery，只使用ReGEX。考虑在变量上使用CAMELCASE，在JavaScript中对变量进行大写似乎是错误的。我正确格式化了你的代码，没有缩进几乎无法阅读。太棒了！谢谢你，我要好好玩玩，看看能不能弄明白。我很感激你没有给我任何答案，我只是需要一些正确方向的提示。再次感谢你！这是一个类，我们只允许使用正则表达式进行验证这些链接帮助您

var addressType = document.getElementById('addressType');
var submit = document.getElementById('submit');
var input = document.getElementById('otherInput');
var allInputs = document.querySelectorAll('input[type="text"]');

addressType.addEventListener('change', function () {
    if (addressType.value === 'other') {
        input.classList.remove('hidden');
    } else {
        input.classList.add('hidden');
    }
}, false);

var state = document.getElementById('state');
var phone = document.getElementById('phone');
var name = document.getElementById('name');
var zip = document.getElementById('zip');
var email = document.getElementById('email');

// NAME VERIFICATION => + check if empty
name.addEventListener('focusout', focus, false);
function focus() {
    if (name.value.match(/^[a-zA-z ]*$/)) {
        name.style.border = 'solid 3px green';
        return true;
    } else {
        name.style.border = 'solid 3px red';
        name.value = '';
    }
}


// ZIP VERIFICATION => + check if empty
zip.addEventListener('focusout', zipF, false);
function zipF() {
    var zipTest = /^([0-9]{5}(?:-[0-9]{4})?)/;
    if (zip.value.match(zipTest)) {
        zip.style.border = 'solid 3px green';
        return true;
    } else {
        zip.style.border = 'solid 3px red';
    }
}


// EMAIL VERIFICATION => + check if empty
email.addEventListener('focusout', emailF, false);
function emailF() {
    var emailTest = /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/;
    if (email.value.match(emailTest)) {
        email.style.border = 'solid 3px green';
        return true;
    } else {
        email.style.border = 'solid 3px red';
    }
}


// STATE VERIFICATION => + check if empty
var state = document.getElementById('state');
state.addEventListener('focusout', stateF, false);
function stateF() {
    var stateTest = /^(?:A[KLRZ]|C[AOT]|D[CE]|FL|GA|HI|I[ADLN]|K[SY]|LA|M[ADEINOST]|N[CDEHJMVY |O[HKR]|PA|RI|S[CD]|T[NX]|UT|V[AT]|W[AIVY])*$/;
    if (state.value.match(stateTest)) {
        state.style.border = 'solid 3px green';
        return true;
    } else {
        state.style.border = 'solid 3px red';
        return state.value = '';
    }
}


// PHONE VERIFICATION => add to check if empty
var phone = document.getElementById('phone');
phone.addEventListener('focusout', phoneF, false);
function phoneF() {
    var phoneTest = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
    if (phone.value.match(phoneTest)) {
        phone.style.border = 'solid 3px green';
        return true;
    } else {
        phone.style.border = 'solid 3px red';
        return phone.value = '';
    }
}


function inputsTrue() {
    if (allInputs === true) {
        submit.classList.remove('hidden');
    } else {
        submit.classList.add('hidden');
    }
}

inputsTrue();