创建一个基本的人体测试验证

我想创建一个简单的验证检查。我有一个输入，要求用户在星期四之后进入。因此，如果用户没有输入“星期五”，我不希望我的表单处理并显示错误消息。我不确定我是否做对了。另外，我在这个页面上也有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的验证或如果没有，我怎样才能使这项工作，因此会检查，看看是否“星期五”被输入。

来源

2016-03-01 Paul

https://jsfiddle.net/#&togetherjs=urFKoEAgrH – Paul

所以，如果我输入“星期五“它不会匹配？这是区分大小写的。你的意思是？ – Nikki9696

@ Nikki9696不，我不想让它区分大小写。 – Paul

当是为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"] 
     } ....

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/

来源

2016-03-01 22:50:46 Sparky

太好了，谢谢！这将是区分大小写还是有办法我可以使它不区分大小写？那么，我可以不包括这个：'}，“请输入正确的值”）;'并创建一条消息，像其他规则？ – Paul

@保罗，是的。如果使用'.validate（）'方法中的'messages'对象定义一条消息，它将覆盖'.addMethod（）'中的消息。你甚至可以把它放在'.addMethod（）'外面，但是如果你忘记在'.validate（）'中定义它，就会冒一个错误。请参阅我编辑的答案，了解不区分大小写的版本和演示。 – Sparky

谢谢你的帮助！这一切都有道理。我不知道如何创建自己的规则。谢谢！！ – Paul

您发布的代码有几个问题。让我们看看他们。

虽然不是固有的问题，但您在第二和第三行中混合使用了jQuery中的香草javascript。
在香草javascript中，本地没有val（）函数，这是jQuery提供的。所以为了使用它，你必须从jQuery对象访问它。 EX：$('#project-humanTest').val()。为了做到这一点，在香草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(); 
    } 
});

来源

2016-03-01 20:55:58

我有更多的代码发布在这里：http://stackoverflow.com/questions/35728871/not-all-input-fields jQuery的验证？noredirect = 1＃comment59140231_35728871 ...感谢您的帮助到目前为止。我只是困惑如何将它与jQuery验证一起。 – Paul

创建一个基本的人体测试验证

回答

相关问题