使用 javascript 进行表单验证 - event.target.form.classList 未定义 - css 技巧教程
Posted
技术标签:
【中文标题】使用 javascript 进行表单验证 - event.target.form.classList 未定义 - css 技巧教程【英文标题】：form validation with javascript - event.target.form.classList is undefined - css tricks tutorial 【发布时间】：2020-07-25 02:33:18 【问题描述】：所以，我一直在关注 CSS-Tricks 关于表单验证的教程。
(https://css-tricks.com/form-validation-part-2-constraint-validation-api-javascript/)
这是我从该网站复制粘贴的代码。 为什么我会在控制台中收到错误消息说 “TypeError: event.target.form.classList is undefined.”？
我必须添加和编写什么来定义该事件。我是初学者，我可以想象，答案一定很简单。
这是目前为止的代码：
<body>
<form action="form_process.php" method="post" class="validate">
<label>Enter Name here:
<input type="text" name="naaame" value="" required></input>
</label>
<label>Enter E-Mail here:
<input type="email" name="email" value="" required></input>
</label>
<label>Enter Number here:
<input type="number" name="number" value="" required></input>
</label>
<label>Enter Date here:
<input type="date" name="date" value="" required></input>
</label>
<button type="submit">Send form</button>
</form>
<!-- Scripts from broiler plate not from tutorial -->
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="js/vendor/modernizr-custom.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')
</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Scripts from Tutorial -->
<script>
var forms = document.querySelectorAll('.validate');
for (var i = 0; i < forms.length; i++)
forms[i].setAttribute('novalidate', true);
// Listen to all blur events
document.addEventListener('blur', function (event)
// Only run if the field is in a form to be validated
if (!event.target.classList.contains('validate')) return;
// Validate the field
var error = event.target.validity;
console.log(error);
, true);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：您在所有文档上注册了一个模糊事件，因此您必须预料到这种类型的错误
你必须检查目标是否不为空所以改变
if (!event.target.classList.contains('validate')) return;
到
if (event.target && !event.target.classList.contains('validate')) return;
【讨论】：
感谢您的快速回复！ :-) 我试过了，它删除了 TypeError 消息。但是，现在以console.log(error); 结尾的部分不起作用。我认为它应该在控制台中向我显示错误，对吗？感谢您的宝贵时间。【参考方案2】：
所以，对于所有阅读过我的问题的人。 我找到了另一种方法，但没有解决我的问题。 但我发现了另一个 表单验证 polyfill javascript 库，它在浏览器 IE 9 之前都可以使用。
我现在正在使用这个：https://github.com/cferdinandi/bouncer
【讨论】：
以上是关于使用 javascript 进行表单验证 - event.target.form.classList 未定义 - css 技巧教程的主要内容，如果未能解决你的问题，请参考以下文章
使用Javascript / jQuery进行Bootstrap 4表单验证
使用 Javascript 进行表单验证 - 字段值必须介于 2 个特定数字之间