简化表单验证的 Javascript 代码

Question

我想简化我的 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;
            }
        }

Answer 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);
}

简化表单验证的 Javascript 代码

Simplify Javascript code for form validation

javascript

forms

sweetalert

sweetalert2