【发布时间】：2019-03-10 03:18:51
【问题描述】：
我创建了这个表单验证脚本，其中“有效”对象保存具有布尔值的属性。首先，代码循环遍历表单中的每个必需元素并执行两种类型的通用检查。 1. 元素是否具有必需的属性？如果有，它有价值吗？ 2. value 是否与 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>
【问题讨论】：
标签： javascript