创建基本的人体测试验证

Question

我正在尝试创建一个简单的验证检查。我有一个输入要求用户输入星期四之后的一天。因此，如果用户没有输入 "Friday"，我不想处理我的表单并显示错误消息。我不确定我是否做对了。此外，我在同一个页面和同一个表单上进行了 jQuery 验证，所以我不确定是否有办法在验证中创建它，以使事情保持一致。

这是我的 javascript 到目前为止的样子，但我遇到了错误。请在下面的评论中查看 jsfiddle。

<form action="" autocomplete="on" method="POST" id="project-information-form">
<input type="text" class="input-borderless" id="project-humanTest" placeholder="Human Test: What day comess after Thursday?">
<input type="submit" id="submit-project" class="submit-project-button" value="Send Project Inquiry">
</form>


function humanTest () {
$("#submit-project").on("click", function(event) {
if( document.getElementById(project-humanTest).val === 'Friday') {
 alert("Correct");
} else {
  alert("Sorry you are wrong.");
}
})
}

我可以将这个基本的验证检查添加到 jQuery 验证中吗？如果不能，我怎样才能使它工作以便它检查是否输入了 "Friday"。

Answer 1

您发布的代码存在一些问题。让我们看看他们。

虽然本质上不是问题，但您在第二行和第三行中混合了香草 javascript 和 jQuery。
在 vanilla javascript 中，原生没有 val() 函数，这是 jQuery 提供的。因此，为了使用它，您必须从 jQuery 对象访问它。例如：$('#project-humanTest').val()。对于它的价值，要在 vanilla JS 中做同样的事情（你已经开始做）你会做类似 document.getElementById('project-humanTest').value
您没有阻止提交按钮上的默认点击操作。这将导致您的自定义验证代码可能无法在表单提交之前触发，无论它在哪里结束。当您在提交按钮上创建自定义点击事件时，请务必尝试如下操作：
```
$('#submit-project').click(function(event) {
  event.preventDefault();
  // continue code from here
});
```

现在我们需要将这一切联系在一起。在没有进一步了解您的表单设置的情况下，我不能说这一定会奏效，但它应该让您了解从哪里开始。

$('#submit-project').click(function(event) {
  event.preventDefault();
  if( $('#project-humanTest').val().toLowerCase() !== 'friday' ) {
    alert('That is not the correct day. Try again');
  } else {
    $(this).submit();
  }
});

Answer 2

当 rule/method 没有可用的 jQuery 验证插件时，您只需使用 the .addMethod() method.

自己编写

jQuery.validator.addMethod("customRule", function(value, element, params) {
    return this.optional(element) || value === params[0];
}, "Please enter the correct value");

然后在.validate()...

内声明

$('#project-information-form').validate({
    rules: {
        "project-humanTest": { // < MUST be the NAME of the field
            required: true,
            customRule: ["Friday"]
        } ....

演示：http://jsfiddle.net/7gxnpba2/1/

注意：this.optional(element) || 部分确保该字段在仅使用该规则本身时将保持可选。换句话说，如果您省略此位并在该字段上仅声明一条规则，则该字段永远不会留空。您始终可以选择在需要时将 required 规则添加到该字段。

也可以不区分大小写：

$.validator.addMethod("customRule", function(value, element, params) {
    return this.optional(element) || value.toLowerCase() === params[0].toLowerCase();
}, "Please enter the correct value");

演示 2：http://jsfiddle.net/7gxnpba2/

创建基本的人体测试验证

Creating a basic human test validation

html

javascript

validation

jquery

jquery-validate