面向对象表单验证脚本报错：TypeError: validateType is undefined 求助

这个错误的核心原因是变量提升导致的时序问题：你在validateTypes函数里引用了validateType对象，但validateType的定义是在validateTypes函数之后的。在JavaScript中，函数声明会被提升到作用域顶部，但变量（包括对象字面量的赋值）只会提升声明、不会提升赋值逻辑。所以当validateTypes第一次执行时，validateType还只是一个未赋值的变量，值为undefined，自然就会抛出这个错误。

修复步骤 #

1. 调整validateType对象的定义位置 #

把validateType对象的定义移到validateTypes函数的前面，这样当validateTypes执行时，validateType已经被正确赋值了。

2. 修正validateTypes里的判断逻辑 #

你代码里写的if(validateType[type] === 'function')有个小错误：应该用typeof validateType[type] === 'function'来检查属性是否是函数，直接比较字符串'function'会导致判断不准确。

3. 额外的优化点 #

• HTML里有两个元素用了相同的id="surnameError"，这不符合HTML规范（id必须唯一），我已经把第一个改成了id="firstNameError"；
• validateRequired函数的逻辑可以优化：当前只是返回el.value，但如果用户输入全空格，el.value会被判定为"有值"，实际上是空内容，建议改成return el.value.trim() !== '';来处理这种情况；
• 我还加了自动显示/隐藏错误提示的逻辑，提升用户体验。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="new_facebook.html" method="get" class="form2" novalidate>
<span id = "firstNameError" class = "hidden">Please enter your first name</span>
<input type="text" name="first_name" placeholder= "first name" class="sign_up all names" id = "first_name" required/>
<span id = "surnameError" class = "hidden">Please enter your surname</span>
<input type="text" name="Surname" placeholder="Surname" class="sign_up all names" id = "surname" required/><br/>
<span id = "emailError" class = "hidden">Please enter a valid email address</span>
<input type="email" name="mobile_number_or_email_address" placeholder="email address" class="sign_up2 all" id= "mobile_number_or_email_address" required /><br/>
<span id = "passwordError" class = "hidden">Please enter a password</span>
<input type="password" name="password" placeholder="new password" class="sign_up2 all" id = "password" required />
<br/><br/>
<input type="submit" name="submit" value="Create Account" id="submit"/>
</form>
<script src = "jquery-3.2.1.js"></script>
<script>
$(document).ready(function(){
$('.form2').on('submit' , function(e){
var valid = {};
var isValid;
var elements = document.getElementsByClassName('all');

// 先定义validateType对象，确保validateTypes能访问到
var validateType = {
email: function(el){
var emailPattern = /^(([^<>()\[\]\\.,;:\s@\"]+(\.[^<>()\[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return emailPattern.test(el.value.trim());
}
}

function validateRequired(el){
if(el.required){
// 优化：去掉前后空格后判断是否为空
return el.value.trim() !== '';
}else{
return true;
}
}

function validateTypes(el){
var type = el.getAttribute('type');
// 修正判断方式：用typeof检查是否为函数
if(typeof validateType[type] === 'function'){
return validateType[type](el);
}else{
return true;
}
}

for(var i = 0; i<elements.length ; i++){
isValid = validateRequired(elements[i]) && validateTypes(elements[i]);
valid[elements[i].id] = isValid;
if(!isValid){
elements[i].style.border = '1px solid red';
// 显示对应的错误提示
document.getElementById(elements[i].id + 'Error').classList.remove('hidden');
}else{
elements[i].style.border = '';
// 隐藏错误提示
document.getElementById(elements[i].id + 'Error').classList.add('hidden');
}
}

for(var property in valid){
if(!valid[property]){
e.preventDefault();
}
}
});
}); // end of document ready
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Onyia