Question

以下是代码：

<script language="JavaScript">
  var frmvalidator  = new Validator("contactform");
  frmvalidator.addValidation("name","required","Please provide your name");
  frmvalidator.addValidation("email","required","Please provide your email");
  frmvalidator.addValidation("email","email",
  "Please enter a valid email address");
</script>

<form method="post" name="contactform" action="contact-form-handler.php">
	<div class="row uniform 50%">
		<div class="6u 12u(mobilep)">
		  <input type="text" name="name" id="name" placeholder="Name" />
		</div>
		<div class="6u 12u(mobilep)">
			 <input type="email" name="email" id="Wemail" placeholder="Email" />
	  </div>
	</div>
  <div class="row uniform 50%">
		<div class="12u">
		  <input type="text" name="subject" id="subject" placeholder="Subject" />
	  </div>
	</div>
	<div class="row uniform 50%">
		<div class="12u">
			<textarea name="message" id="message" placeholder="Enter your message" rows="6">
      </textarea>
	  </div>
	</div>
	<div class="row uniform">
		<div class="12u">
			<ul class="actions align-center">
			  <li><input type="submit" value="Send Message" /></li>
		  </ul>
	  </div>
  </div>
</form>

这是控制台错误：

{
  "message": "Uncaught ReferenceError: Validator is not defined",
  "filename": "https://stacksnippets.net/js",
  "lineno": 12,
  "colno": 27
}

“email”验证器的功能如下所示：
Screenshot of JS validation

但是，“必需”验证器不起作用。我原本试过“req”，但那也没用。我认为重复的id和名称值可能有问题，但我改变它们无济于事。我很困惑为什么JS不会应用所需的验证器。我应该更改什么才能使此验证有效？

编辑：我使用this教程作为指南。 Validator对象位于可下载的.js文件中幸运的是，评论和以前的答案使我朝着正确的方向前进。请参阅下面的确切答案。

Answer 1

我不确定你要做什么，但Validor似乎不是一个vanilla.js对象。

如果您尝试使用本机html5表单验证，则只需要向表单元素添加正确的属性。

对于电子邮件输入，它将是： <input type="email" required="required" .../>

这将告诉浏览器将此字段验证为电子邮件，此字段是必填字段。

并非所有浏览器都支持此功能（大多数都是旧版本），但无论如何都需要服务器验证，所以现在最好不要在javascript中实现任何自定义内容。

如果您需要它，请在github上找到一些javascript表单验证库。有很多。

或者使用onchange事件或```onsubmit``构建一个用于整体表单验证。

P.S。 <script language="JavaScript">语言已过时，也可以输入。很好。

Answer 2

所以我犯的错误很简单我没有将gen_validatorv4.js脚本放在html文件的标题中，而是将其放在<body>元素的底部，就在</body>之前。

出于某种原因（我不太清楚为什么 - 解释这个的评论会很棒），将脚本放在标题中会修复错误。

解决方案：将验证程序脚本放在HTML的标题中，而不是放在正文的末尾。

谢谢，SO！

为什么javascript“req”验证器不起作用？

2 个答案: