简化用于表单验证的 Javascript 代码答案

【问题标题】：Simplify Javascript code for form validation简化用于表单验证的 Javascript 代码
【发布时间】：2019-07-24 06:48:27
【问题描述】：

我想简化我的 Javascript 代码，是否可以没有多个 if 条件？另外，我可以只有一个 swal(sweetalert) 并为每个错误显示一条自定义消息吗？

function validare(formElement) {
        var name = document.forms["form"]["echipa"].value;
        var mobile = document.forms["form"]["telefon"].value;
        var email = document.forms["form"]["email"].value;
        var nume = "numele";
        var telefon = "numarul de telefon";
        var telefon_invalid = "un numar de telefon valid";
        var mail = "adresa de email";
        var mail_invalid = "o adresa de mail valida";
        var eroare = 0;
        if (name == "" && name.length < 4) {
            swal('Eroare!', 'Introdu te rog ' + nume, 'error');
            return false;
        }
        if (mobile == "" && mobile.length < 4) {
            swal('Eroare!', 'Introdu te rog ' + telefon, 'error');
            return false;
        } else {
            if (isNaN(mobile) || mobile.length < 8) {
                swal('Eroare!', 'Introdu te rog ' + telefon_invalid, 'error');
                return false;
            }
        }

        if (email == "") {
            swal('Eroare!', 'Introdu te rog ' + mail, 'error');
            return false;
        } else {
            var re = /^(?:[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
            var x = re.test(email);
            if (!x) {
                swal('Eroare!', 'Introdu te rog ' + mail_invalid, 'error');
                return false;
            }
        }

【问题讨论】：

如果 name == "" 的长度显然是
只是条件，我修改为4，谢谢。
即使是 4 也是一个不必要的条件，因为当 name=="" 时它总是为真。如果希望小于 4 的长度通过条件，则需要去掉 name=="" 条件。
你很难让这段代码更简单。你正在做所有你需要的检查。你可以稍微调整一些线条，但总的来说它是一样的。你能做的就是把它分解成单独的部分，每个部分都单独检查一件事。您将拥有大致相同数量的代码（可能会更多），但将来维护起来会更容易——如果您需要更改名称验证，只需更改它即可。如果您需要新的验证，请不要触摸其他代码。另一种方法是使用验证库，它将为您完成大部分工作。
检查jsfiddle.net/KooiInc/mruyzafv/embedded/result,js,html,css

标签： javascript forms sweetalert sweetalert2

【解决方案1】：

解决办法是：

function validare() {
         const echipa = document.forms["form"]["echipa"].value;
         const telefon = document.forms["form"]["telefon"].value;
         const email = document.forms["form"]["email"].value;


  if (!echipa.trim()) {
    showErorMessage('Eroare! Introdu te rog numele');
    return false;
  } else if (!telefon.trim()) {
        showErorMessage('Eroare! Introdu te rog un numar de telefon');
    return false;
    } else if (!validatePhoneNumber(telefon)) {
    showErorMessage('Eroare! Introdu te rog un numar de telefon valid');
    return false;
  } else if (!email.trim()) {
    showErorMessage('Eroare! Introdu te rog o adresa de email');
    return false;
  } else if (!validateEmail(email)) {
        showErorMessage('Eroare! Introdu te rog o adresa de email valida');
    return false;
    }

  return true;
}

function showErorMessage(message) {
    swal('Eroare',message,'error');
}

function validatePhoneNumber(value) {
    return value.match(/\d/g).length === 10;
}

function validateEmail(value) {
    const emailRegex = /^(?:[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;

  return emailRegex.test(value);
}

【讨论】：