javascript - 有没有更简单的方法来验证我在 jquery 中的表单而不是我所拥有的？

Question

我正在尝试使用 jquery 创建表单验证。首先，代码对我不起作用，其次我希望有一种更简单的方法可以使用 jquery 使用 reg ex 模式来验证我的表单。我不知道我是否正确使用 jquery，并且我想避免使用任何插件。

    $(document).ready(function() {

        var pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
        var pattern1 = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/; 
        var pattern2 = /[a-zA-Z]*( [a-zA-Z]*)?/;

   $('#submit').on('click', function() {
      var valid = true,
      errorMessage = "",


if ($('#role').val() == '') {
    errorMessage  = "please choose a role \n";
    valid = false;
}enter code here

if ($('#state').val() == '') {
    errorMessage  = "please choose a state \n";
    valid = false;
}

if ($('#major').val() == '') {
    errorMessage  = "please provide a major \n";
    valid = false;
}

if ($('#degree').val() == '') {
    errorMessage  = "please provide a degree \n";
    valid = false;
}

if ($('#location').val() == '') {
    errorMessage  = "please choose a location \n";
    valid = false;
}

if ($('#gradyear').val() == '') {
    errorMessage  = "please provide a graduation year \n";
    valid = false;
}

if ($('#dept').val() == '') {
    errorMessage  = "please provide your department \n";
    valid = false;
}

if ($('#campadd').val() == '') {
    errorMessage += "please enter your address\n";
     valid = false;
} 

if($('#email').val() !== ""){
        if(!pattern.test('#email'.val())){
            errorMessage += "email invalid!\n";                
            valid  = false;
        }
if($('#telephone').val() !== ""){
        if(!pattern1.test('#telephone'.val())){
            errorMessage += "telephone number invalid!\n";                
            valid  = false;
        }
    }}

if( !valid && errorMessage.length > 0){
    alert(errorMessage);
}

Answer 1

首先，您帖子中的代码格式有点偏离，这使得阅读有些困难。当你说它“不起作用”时，你到底是什么意思？

我最好的猜测是您的意思是表单仍然提交，即使出现 errorMessage 警报框也是如此。如果是这种情况，那可能是因为您没有取消提交事件。

像这样更改您的代码：

// submit instead of click event, give a name to the event argument
$('#submit').on('submit', function(e) {
//...

if( !valid && errorMessage.length > 0){
    e.preventDefault(); // prevents the form submission
    alert(errorMessage);
}