客户端JavaScript验证不起作用

我是电子邮件验证新手。有人能帮我弄清楚为什么它不能正常工作吗。我有一个简单的表单，其中包含名称、密码、确认密码、电子邮件和URL字段。如果这些字段中有任何错误，我不希望处理表单。如果没有错误，我希望显示一条消息

您的表单已成功提交

这是代码

HTML:

JavaScript:

//url validation
function validateURL(url){
    var urlRegExp = /^(http|https):\/\/(([a-zA-Z0-9$\-_.+!*'(),;:&=]|%[0-9a-fA-F]{2})+@)?(((25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9]|[1-9][0-9]|[0-9])(\.(25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9]|[1-9][0-9]|[0-9])){3})|localhost|([a-zA-Z0-9\-\u00C0-\u017F]+\.)+([a-zA-Z]{2,}))(:[0-9]+)?(\/(([a-zA-Z0-9$\-_.+!*'(),;:@&=]|%[0-9a-fA-F]{2})*(\/([a-zA-Z0-9$\-_.+!*'(),;:@&=]|%[0-9a-fA-F]{2})*)*)?(\?([a-zA-Z0-9$\-_.+!*'(),;:@&=\/?]|%[0-9a-fA-F]{2})*)?(\#([a-zA-Z0-9$\-_.+!*'(),;:@&=\/?]|%[0-9a-fA-F]{2})*)?)?$/;
    return urlRegExp.test(url);
}

//email validation
function validateEmail(email){
    var pattern = /^(([^<>()[\]\\.,;:\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 pattern.test(email);
}

$('#submit').on('submit', function(e){
    var name = $.trim($('.fName').val()),
    password = $.trim($('.password').val()),
    confirmPassword = $.trim($('.confirmPassword').val()),
    email = $.trim($('.email').val()),
    url = $.trim($('.url').val());

    if (name === '' || password === '' || confirmPassword === '' || email === '' || url==='') {
        e.preventDefault();
    } else if($('.password').val() !== $('.confirmPassword').val()) {
        e.preventDefault();
    } else if(validateEmail($('.email').val() === false)){
        var el = validateEmail($('.email').val());
        console.log(el);
        e.preventDefault();
    } else if(validateURL($('.url').val() === false)){
        e.preventDefault();
    } else {
        console.log('bar');
        //$('.error-message').fadeIn('slow');
        e.preventDefault();
    }
});

//url验证
函数validateURL（url）{
（a-a-zA-Z0-9-9-9.-..[9....-！*（），；：：：：：：：：：：：：：：：：：：：：：：：：[[10-9a-9-a-a-a-a-a-a-F-F-F-F-F-F-F-F-F-0-2{{{2}（2}）上述（http（http（http（http（http（124；http；http；http；http；http；http；http；http：：：；http：：：：：：：：：：：：）以下以下以下以下以下以下以下以下）的）将：：：：：：：：//////////////////////////////////////////////////////////////////））本地主机（[a-zA-Z0-9\-\u00C0-\u017F]+\）+（[a-zA-Z]{2，}））（：[0-9]+）（\/（[a-zA-Z0-9$\-\u00C0-\u017F]%[0-9a-fA-F]{2}）*（\/（[a-zA-Z0-9$\-！*”）（；：@&=]，；：：&=].%[0-9a-fA-F]{2}）**）？（\？（[a-zA-Z0-9$\-\-\.+！*”（），；：：：&==\/？].%[0-9a-fA-F]{2}）*）？（\（[a-zA-Z0-9$\-\-\.+！*”，；：：&==\/.%[0-9a-fA-F]{2}*）/）；
返回urlRegExp.test（url）；
}
//电子邮件验证
功能验证电子邮件（电子邮件）{
变量模式=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回模式。测试（电子邮件）；
}
$（'#submit'）。关于（'submit'，函数（e）{
变量名称=$.trim（$（'.fName'）.val（）），
密码=$.trim（$（'.password'）.val（）），
confirmPassword=$.trim（$（'.confirmPassword'）.val（）），
电子邮件=$.trim（$（'.email'）.val（）），
url=$.trim（$（'.url'）.val（））；
如果（姓名==''密码==''确认密码==''电子邮件==''url==''）{
e、 预防默认值（）；
}else if（$（'.password'）.val（）！==$（'.confirmPassword'）.val（））{
e、 预防默认值（）；
}else if（validateEmail（$（'.email'）.val（）==false））{
var el=validateEmail（$（'.email'）.val（））；
控制台日志（el）；
e、 预防默认值（）；
}else if（validateURL（$（'.url'）.val（）==false））{
e、 预防默认值（）；
}否则{
console.log（'bar'）；
//$（'.error message'）.fadeIn（'slow'）；
e、 预防默认值（）；
}
});

---

JS-Bin链接：

我完全改变了我的答案，来描述我在这里所做的工作：

你有

位于RegExp模式字符串的末尾。对于这些类型的字符串，这些不是必需的

您在错误的DOM元素上绑定了

submit

。它需要绑定在表单上，而不是“提交”按钮上

由于表单不是作为

live

内容动态添加到DOM中的，因此实际上不需要使用

.on（）

函数，而只需使用

.submit（）

函数即可

我还在您的if语句中添加了其他次要清理：

• 让每个人检查自己的if语句，而不是一个

  else if | else

  progression，这样每个字段都会被单独检查，所有错误都会一次显示出来，而不是每次用户单击提交时都显示一个错误
• 更改了if语句中的所有

  $（..）.val（）

  引用，以使用已在

  .submit（）函数的变量声明区域中收集的变量。如果您不打算使用这些值变量，那么创建这些值变量没有多大意义

• 最后，在错误中添加一些颜色，以指示哪些字段不符合规则

---

你能解释一下你遇到了什么错误，或者缺少功能吗？我没有遇到错误，但如果我只填写电子邮件和url。如果我愿意提交，那就是提交表格。我不想要那种行为。我想检查每个输入字段。

input {
    display: block;
    margin: 10px 0;
}

//url validation
function validateURL(url){
    var urlRegExp = /^(http|https):\/\/(([a-zA-Z0-9$\-_.+!*'(),;:&=]|%[0-9a-fA-F]{2})+@)?(((25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9]|[1-9][0-9]|[0-9])(\.(25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9]|[1-9][0-9]|[0-9])){3})|localhost|([a-zA-Z0-9\-\u00C0-\u017F]+\.)+([a-zA-Z]{2,}))(:[0-9]+)?(\/(([a-zA-Z0-9$\-_.+!*'(),;:@&=]|%[0-9a-fA-F]{2})*(\/([a-zA-Z0-9$\-_.+!*'(),;:@&=]|%[0-9a-fA-F]{2})*)*)?(\?([a-zA-Z0-9$\-_.+!*'(),;:@&=\/?]|%[0-9a-fA-F]{2})*)?(\#([a-zA-Z0-9$\-_.+!*'(),;:@&=\/?]|%[0-9a-fA-F]{2})*)?)?$/;
    return urlRegExp.test(url);
}

//email validation
function validateEmail(email){
    var pattern = /^(([^<>()[\]\\.,;:\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 pattern.test(email);
}

$('#submit').on('submit', function(e){
    var name = $.trim($('.fName').val()),
    password = $.trim($('.password').val()),
    confirmPassword = $.trim($('.confirmPassword').val()),
    email = $.trim($('.email').val()),
    url = $.trim($('.url').val());

    if (name === '' || password === '' || confirmPassword === '' || email === '' || url==='') {
        e.preventDefault();
    } else if($('.password').val() !== $('.confirmPassword').val()) {
        e.preventDefault();
    } else if(validateEmail($('.email').val() === false)){
        var el = validateEmail($('.email').val());
        console.log(el);
        e.preventDefault();
    } else if(validateURL($('.url').val() === false)){
        e.preventDefault();
    } else {
        console.log('bar');
        //$('.error-message').fadeIn('slow');
        e.preventDefault();
    }
});