javascript - 我必须使用 RegEx 来验证表单的多个部分

Question

对于这个项目，我必须创建一个披萨外卖表单。有多个步骤，第一部分是创建一个验证用户输入的表单。到目前为止，我已经能够部分解决这个问题。我的问题是1:有没有更简洁的验证方式？2:我试图使提交按钮仅在验证所有字段后才出现，但是，我不知道如何做到这一点。以下是我的 GitHub 链接

https://github.com/jcast90/JavaScript-RegEx-Form

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();

Answer 1

由于看起来这是一项作业，因此我已尽力提供提示，而不仅仅是给您答案。

1. Input elements have a pattern attribute 。您可以使用它更轻松地根据正则表达式检查输入，而无需任何 JavaScript。
2. There is a :valid CSS pseudo class 。您可以使用它来设置无效元素的样式，而不是直接在事件监听器中应用样式。如果任何输入无效，您还可以使用它来设置整个表单(以及任何子元素)的样式，这将是我隐藏提交按钮的首选解决方案。

<小时/>

您的老师可能希望您使用 Javascript 进行验证，在这种情况下，您可以更改一些内容以使您的生活更轻松一些。

1. 您可能已经注意到您有很多重复的代码，您可以将其提取到其自己的函数中，该函数接受要检查的输入，以及用于检查它的正则表达式并根据是否应用正确的样式或者正则表达式不匹配。完成此操作后，您可以使用正确的正则表达式和元素调用每个事件监听器中的函数。

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

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