问题描述
我在不同页面上有多个具有相同字段(例如电子邮件)的表单,因此我想创建一个通用类/函数来验证具有不同字段的不同表单,但我对JavaScript没有太多的经验。
这是原始验证器在函数形式中的外观:
function validateform(form) {
$(".req").css("border","1px solid green");
$(".email").css("border","1px solid green");
$(".docs-file").css("border","1px solid green");
$(".images-file").css("border","1px solid green");
$(".req").each(function() {
if($(this).val() == "" || $(this).val().replace(/\s/g,'').length == 0) {
$(this).css("border","1px solid red");
return false;
}
});
if((/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($(".email").val())))
{}
else {
$(".email").css("border","1px solid red");
return false;
}
var doc_file = $(".doc-file").val().split(/(\\|\/)/g).pop()
var docs_re = /(\.pdf|\.doc|\.docx|\.pptx|\.xlsx|\.xls)$/i;
if (!docs_re.exec(doc_file)) {
$(".docs-file").css("border","1px solid red");
return false;
}
var image_file = $(".image-file").val().split(/(\\|\/)/g).pop()
var image_re = /(\.jpg|\.jpeg|\.bmp|\.gif|\.png)$/i;
if (!image_re.exec(image_file) || $(".image-file").val() == '') {
$(".images-file").css("border","1px solid red");
return false;
}
var pwd1 = $('[name=password1]');
var pwd2 = $('[name=password2]');
var pwdre = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/;
if (!pwdre.exec(pwd1)){
pwd1.css("border","1px solid red");
return false;
}
if (pwd1.val() == pwd2.val()){
} else {
pwd2.css("border","1px solid red");
return false;
}
return True;
}
并非所有表单都共享相同的字段,我对基于字符的字段(例如名称/用户名/文本区域)进行了要求,但问题是将此函数放置在所有表单中会为没有密码的表单返回错误字段。
我的问题是,如果我将其作为一个类,如果这应该是图像,我应该如何以不同的形式调用不同的方法:
class FormValidator{
email_validor(email){
if((/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.val())))
{}
else {
email.css("border","1px solid red");
console.log('email error');
return false;
}
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)