从未调用jQuery验证方法

我知道我最近问了很多关于jQuery验证的问题，但我想我的问题现在已经归结为最基本的问题了。

所以如果我有这个HTML页面：

<html>
<head>
<title>validation test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.js"></script>
</head>
<body>
<form id="theform">
<div id="num" name="num">86</div>
</form>
<script type="text/javascript">     
var validationObject = {
rules: {
num: {
numtest:true
}
}
};
$.validator.addMethod("numtest", function(value, element) {
return value == 42;
});
$('form').validate(validationObject);
if ($("form").valid())
alert("VALID");
else
alert ("INVALID");
</script>
</body>
</html>

然后我希望警报是"INVALID"，因为num是86而不是42。但我得到了"VALID"；我定义的用于进行验证的函数没有被调用(我在return value == 42;上设置了一个断点，它永远不会被调用(。为什么会这样？如何确保调用验证函数？

您在自定义方法中缺少一条验证错误消息。您还应该使用this.optional(element)，这样您就可以将字段留空，并单独使用required规则(按照您的编写方式，该字段也是必填字段。(
```
$.validator.addMethod("numtest", function(value, element) {
return this.optional(element) || (value == 46);
}, "validation error message");
```
将整个过程放在ready处理程序中，这样可以确保在调用.validate()方法之前存在表单(然而，这并不是破坏表单的原因，因为JavaScript是在HTML之后调用的。(
此插件无法识别div，因为它不是有效的表单输入元素。将其更改为<input />、<select>或<textarea>元素。
```
<input type="text" id="num" name="num" />
```

Item#3是唯一会破坏代码的东西。

工作演示：jsfiddle.net/c38uxh6m/

请仔细查看SO Wiki页面和大量在线示例。

相关内容

最新更新

热门标签：