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

由于看起来这是一项任务，我已尽力给出提示，而不仅仅是给你答案。

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

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

你可能已经注意到你有很多重复的代码，你可以把它拉出来接受要检查的输入的自己的函数，然后用正则表达式检查它并根据是否应用正确的样式或者不是正则表达式匹配。完成此操作后，您只需使用正确的正则表达式和元素调用每个事件侦听器中的函数。
如果您突然决定使用红色边框而不是无效输入，边框应为橙色，会发生什么？现在你必须返回并更改代码中的每个函数。要解决此问题，您可以添加和删除类似.valid / .invalid的类来设置输入样式。
如果使用.valid类，则检查一切是否有效非常容易。您可以检查是否存在.invalid的任何元素，或者您可以检查每个输入是否都有.valid。

Answer 2

验证的最佳实践使用jquery验证plugin.easy使用和强大的表单验证。

我不得不使用RegEx来验证表单的几个部分

2 个答案: