创建基本的人工测试验证

Posted 2023-05-09

【中文标题】创建基本的人工测试验证

【英文标题】：Creating a basic human test validation

【发布时间】：2016-06-14 10:47:55

【问题描述】：

我正在尝试创建一个简单的验证检查。我有一个输入要求用户输入星期四之后的第二天。因此，如果用户没有输入“星期五”，我不希望我的表单被处理并显示错误消息。我不确定我是否做对了。此外，我在同一个页面和同一个表单上都有 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 validate 中吗？如果没有，我该如何进行这项工作，以便检查是否输入了“星期五”。

【问题讨论】：

jsfiddle.net/#&togetherjs=urFKoEAgrH

所以如果我输入“friday”会不匹配？这是区分大小写的。你是故意的吗？

@Nikki9696 不，我不希望它区分大小写。

查看使用函数的 jQuery validate required ... 在该函数中测试小写字母

【参考方案1】：

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

演示：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/

【讨论】：

太好了，谢谢！这会区分大小写还是有办法让它不区分大小写？那么，我可以不包括这个：, "Please enter the correct value"); 并像其他规则一样创建一条消息吗？

@Paul，是的。如果您在.validate() 方法中使用messages 对象定义消息，它将覆盖来自.addMethod() 的消息。您甚至可以将其排除在 .addMethod() 之外，但如果您忘记在 .validate() 中定义它，则可能会出错。请参阅我编辑的答案以获取不区分大小写的版本和演示。

感谢您的帮助！这一切都说得通。我以前不知道如何创建自己的规则。谢谢！！

【参考方案2】：

您发布的代码存在几个问题。让我们看看它们。

虽然本质上不是问题，但您在第二行和第三行将 vanilla 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();
  
);

【讨论】：

我在此处发布了更多代码：***.com/questions/35728871/… ... 感谢您迄今为止的帮助。我只是很困惑如何将它与 jQuery validate 结合在一起。