javascript - jQuery 验证 - 语法错误

Question

我有以下 jQuery 代码。

$(document).ready(function() {
  $("#testform").validate(function() {
    rules: {
      firstname: {
        minlength: 3,
        required: true // error is here?
      },
      surname: {
        minlength: 2,
        required: true
      },
      gender: {
        notEqualTo: "select"
      }
    },
    messages: {
      firstname: {
        required: "Zadejte své jméno",
        minlength: "Jméno musí mít délku alespoň 3 znaky"
      },
      surname: {
        required: "Zadejte své příjmení",
        minlength: "Jméno musí mít délku alespoň 2 znaky"
      },
      gender: {
        notEqualTo: "Zvolte pohlaví"
      }
    },
    errorContainer: "#errors"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

我的 Web 控制台显示，第 6 行 (rules.firstname.required) 是一些语法错误。我看不到它。我也尝试切换 minlength 和 required 但错误仍然停留在同一行。

有人能看到吗？

Answer 1

解决方案

你的错误是你传递了一个函数到validate:

$("#testform").validate(function() { // <-- here you're passing a function
  // ...
})

validate 需要一个对象:

$("#testform").validate({ // <-- but you should pass an object
  // ...
});

语法错误是在函数表达式上声明对象属性的结果。

$("#testform").validate(function() {
  rules: { // <-- (*)
    // ... 
  },
  // ...
})

(*) 您正试图在一个对象上定义一个属性，但却声明了一个 label statement在函数表达式中。

---

语法错误解释

在函数表达式上定义一个属性是有效的语法，尽管实际上并不是这样。这意味着您要声明一个 label statement它有一个标签和一个主体，恰好在一个函数表达式中:

var x = function() {
  rules: {} // label statement with label 'rules' and a body block expression
}

console.log(x.rules); // undefined. Not really useful 

Parse Tree for the code above .

嵌套这些标签语句也是有效的:

var x = function() {
  rules: {       // label statement with label 'rules' and a body block expression
    name: 'test' // label statement with label 'name' and a literal expression 'test'
  }
}

console.log(x.rules); // undefined 

Parse Tree for the code above

事实上，我们甚至可以自己定义标签语句:

rules: {} // valid syntax for a labeled statement with a label "rules" and a body block expression

Parse Tree for the code above

一旦您通过错误地假设您正在向对象添加属性来添加第二个标签，就会发生语法错误。

更准确地说，问题出在 , ( Comma Operator )，它需要一个表达式，但我们给它一个带标签的语句:

rules: {},   // label statement with label 'rules' and a body block expression
messages: {} // <-- syntax error: thing before the comma is not an expression

没有 , 会消除错误，因为我们只有两个独立的标记语句:

rules: {}    // label statement with label 'rules' and a body block expression
messages: {} // label statement with label 'messages' and a body block expression

这就是错误出现在第 6 行的原因，因为它就在第一个 , 之后。删除所有逗号将删除您的语法错误并留下一堆带标签的语句:

$(document).ready(function(){
    $("#testform").validate(function(){
        rules: {
            firstname: {
                minlength: 3
                required: true
            }
            surname: {
                minlength: 2
                required: true
            }
            gender: {
                notEqualTo: "select"
            }
        }
        messages: {
            firstname: {
                required: "Zadejte své jméno"
                minlength: "Jméno musí mít délku alespoň 3 znaky"
            }
            surname: {
                required: "Zadejte své příjmení"
                minlength: "Jméno musí mít délku alespoň 2 znaky"
            }
            gender: {
                notEqualTo: "Zvolte pohlaví"
            }
        }
        errorContainer: "#errors"
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

当然，这仍然会在您的代码中留下错误，因为您将错误的参数传递给 validate 但至少会运行 :)