Question

我正在尝试创建一个简单的验证检查。我有一个输入，要求用户在星期四之后输入。因此，如果用户没有输入＆＃34;星期五＆＃34;，我不希望我的表单处理并显示错误消息。我不确定我是否做得对。另外，我在同一页面和同一个表单上都有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.");
}
})
}

我可以将这个基本的valdiation检查添加到jQuery验证，如果没有，我怎样才能使这个工作，所以它检查是否＆＃34;星期五＆＃34;进入了。

Answer 1

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

虽然本质上不是问题，但你在第二和第三行混合使用vanilla javascript和jQuery。
在vanilla javascript中，本机没有val（）函数，这是jQuery提供的东西。因此，为了使用它，您必须从jQuery对象访问它。 EX：$('#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

当jQuery Validate插件没有可用的规则/方法时，您只需使用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"]
        } ....

DEMO：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");

DEMO 2：http://jsfiddle.net/7gxnpba2/

创建基本的人体测试验证

2 个答案: