我创建了此表单验证脚本，其中的“有效”对象包含具有布尔值的属性。首先，代码循环遍历表单中的每个必需元素，并执行两种类型的常规检查。 1.元素是否具有必填属性？如果是这样，它是否有价值？ 2.值是否与type属性匹配？例如，电子邮件输入中是否包含电子邮件地址？一旦执行了常规检查，脚本便进行一些检查，这些检查适用于表单上的各个元素。
跟踪有效元素为了跟踪错误，创建了一个名为va1id的对象。随着代码循环遍历执行通用检查的每个元素，将为每个元素的va1id对象添加一个属性：•属性名称是值其id属性。 •该值为布尔值。每当在元素上发现错误时，该值就会设置为fa1se。
我在这里遇到的问题是，即使电子邮件输入与电子邮件类型不匹配，表单仍会提交输入，其他所有东西都可以正常工作。为什么会这样，我该怎么做才能纠正此错误。
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="new_facebook.html" method="get" class="form2" novalidate>
<span id = "surnameError" class = "hidden">what is 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">what is your surname</span>
<input type="text" name="Surname" placeholder="Surname" class="sign_up all names" id = "surname" required/><br/>
<span id = "emailError" class = "hidden">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" class = "hidden" required /><br/>
<span id = "passwordError" class = "hidden">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');
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);
}
}
function validateRequired(el){
if(el.required){ // if the element is required
return el.value;
}else{ // if the element is not required
return true;
}
}
function validateTypes(el){
var type = el.getAttribute('type');
if(validateType[type] === 'function'){
return validateType[type](el);
}else{ // no need to validate
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';
}else{
elements[i].style.border = '';
}
}
for(var property in valid){
if(!valid[property]){
e.preventDefault();
}
}
});
}); // end of document ready
</script>
</body>
</html>
答案 0 :(得分：0)
validateType [type]返回实际函数，因此要检查类型而不是
if(validateType[type] === 'function')
使用
if(typeof validateType[type] === 'function')
$('.form2').on('submit' , function(e){
var valid = {};
var isValid;
var elements = document.getElementsByClassName('all');
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);
}
}
function validateRequired(el){
if(el.required){ // if the element is required
return el.value;
}else{ // if the element is not required
return true;
}
}
function validateTypes(el){
var type = el.getAttribute('type');
if(typeof validateType[type] === 'function'){
return validateType[type](el);
}else{ // no need to validate
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';
}else{
elements[i].style.border = '';
}
}
for(var property in valid){
if(!valid[property]){
e.preventDefault();
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form action="new_facebook.html" method="get" class="form2" novalidate>
<span id = "surnameError" class = "hidden">what is 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">what is your surname</span>
<input type="text" name="Surname" placeholder="Surname" class="sign_up all names" id = "surname" required/><br/>
<span id = "emailError" class = "hidden">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" class = "hidden" required /><br/>
<span id = "passwordError" class = "hidden">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>