为什么jquery验证不起作用

我想在提交前验证我的表单。但是，我不明白为什么低于jQuery验证不起作用！ Fiddle here。为什么jquery验证不起作用

HTML

<input id="txtName" placeholder="Enter Name" /> 
<input id="txtEmail" placeholder="Enter Email" /></td> 
<input id="txtPhone" placeholder="Enter Phone" /></td> 
<input id="txtWebsite" placeholder="Enter Website" /></td> 
<textarea id="txtContent" placeholder="Your text here.."></textarea> 
<button id="btnSend">SEND</button>

我试图验证电子邮件和URL空输入字段和正则表达式验证。 jQuery的

var txtName = $("#txtName"); 
    var txtEmail = $("#txtEmail"); 
    var txtPhone = $("#txtPhone"); 
    var txtWebsite = $("#txtWebsite"); 
    var txtContent = $("#txtContetnt"); 

    var emailFilter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; 
    var urlFilter = /((?:https?\:\/\/|www\.)(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)/; 
    var phoneFilter = /^\d+$/; 

$("#btnSend").click(function (evt) { 
    if (txtName.val() == "") { 
     txtName.animate({ backgroundColor: '#630000' }, 200, "easeInQuad"); 
     evt.preventDefault(); 
    } 
    if (txtEmail.val() == "") { 
     txtEmail.animate({ backgroundColor: '#630000' }, 200, "easeInQuad"); 
     evt.preventDefault(); 
    } 
    if (txtContent.val() == "") { 
     txtEmail.animate({ backgroundColor: '#630000' }, 200, "easeInQuad"); 
     evt.preventDefault(); 
    } 
    if (!phoneFilter.test(txtPhone.val())) { 
     txtEmail.animate({ backgroundColor: '#630000' }, 200, "easeInQuad"); 
     evt.preventDefault(); 
    } 
    if (!urlFilter.test(txtWebsite.val())) { 
     txtContent.animate({ backgroundColor: '#630000' }, 200, "easeInQuad"); 
     evt.preventDefault(); 
    } 

    if (!emailFilter.test(txtEmail.val())) { 
     txtEmail.animate({ backgroundColor: '#630000' }, 200, "easeInQuad"); 
     evt.preventDefault(); 
    } 

});

来源

2014-01-24 Faizan

你指的是像'txtName'变量的函数，但我没有看到你已经初始化他们的位置。 – 2014-01-24 05:30:39

你应该删除重复的代码行，把它们放在一个函数或结合你的'if'条件，但不要重复相同的两行代码*六*倍... – meagar

此外您的电子邮件正则表达式已完全中断。考虑'/[email protected]+\..+/'。 – meagar

您的验证似乎是工作（除非，也许，对于电子邮件的一个）。但是，你的jQuery动画不是。这从.animate() jQuery的页面：

所有动画处理的属性应该被动画化以单一数值，除了下面提到;大多数非数字属性不能使用基本的jQuery功能动画（例如，宽度，高度，或left可以是动画，但背景色不能是，除非使用了 jQuery.Color（）插件）。

来源

2014-01-24 06:18:04

当您Reg exp拿不动，你需要比较各个元素的匹配与Reg exp值值..

您可以通过这种方法做到这一点，

function IsEmailAddressValid(emailAddress) { 
    var pattern = new RegExp(/^[+a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$); 
    return pattern.test(emailAddress); 
};

那么你就可以检查有效的电子邮件地址，如

if(!IsEmailAddressValid(emailaddress)) 
{ 
    /* do something, it will give true if email is valid */ 
}

您可以创建matchin函数g您的单独Reg exp重用性。

，或者你可以用Reg expmatch您选择的值，因为我在这个DEMO HERE

我在做那种着急，所以我试图掩盖尽可能多地。我编辑了一些现有的代码。

供参考：正则表达式可能会或可能不会给出预期的结果。搜索一个适合你的需求和它的一切好处。希望有所帮助。

编辑：正如@Mike W提到的，你的.animate（）不能在小提琴上工作，所以我用我的错误类代替它。

来源

2014-01-24 06:43:10 Rohit416

你的jQuery验证似乎有一些小错误：

我已经更新了你的jQuery如下:(Fiddle here.）

//Validation 

var txtName = $("#txtName"); 
var txtEmail = $("#txtEmail"); 
var txtPhone = $("#txtPhone"); 
var txtWebsite = $("#txtWebsite"); 
var txtContent = $("#txtContent"); 

var emailFilter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; 
var urlFilter = /((?:https?\:\/\/|www\.)(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)/; 
var phoneFilter = /^\d+$/; 

$("#btnSend").click(function (evt) { 
    if (txtName.val() == "") { 
     txtName.css('background-color', '#630000'); 
     evt.preventDefault(); 
    } 
    if (txtEmail.val() == "") { 

     txtEmail.css('background-color', '#630000'); 
     evt.preventDefault(); 
    } 


    if (txtContent.val() == "") { 

     txtContent.css('background-color', '#630000'); 
     evt.preventDefault(); 
    } 
    if (!phoneFilter.test(txtPhone.val())) { 

     txtPhone.css('background-color', '#630000'); 
     evt.preventDefault(); 
    } 
    if (!urlFilter.test(txtWebsite.val())) { 

     txtWebsite.css('background-color', '#630000'); 
     evt.preventDefault(); 
    } 

    if (!emailFilter.test(txtEmail.val())) { 

     txtEmail.css('background-color', '#630000'); 
     evt.preventDefault(); 
    } 


}); 
txtName.click(function() { 
    txtName.removeAttr("style"); 
}); 
txtEmail.click(function() { 
    txtEmail.removeAttr("style"); 
}); 
txtPhone.click(function() { 
    txtPhone.removeAttr("style"); 
}); 
txtWebsite.click(function() { 
    txtWebsite.removeAttr("style"); 
}); 
txtContent.click(function() { 
    txtContent.removeAttr("style"); 
}); 
txtName.focus(function() { 
    txtName.removeAttr("style"); 
}); 
txtEmail.focus(function() { 
    txtEmail.removeAttr("style"); 
}); 
txtContent.focus(function() { 
    txtContent.removeAttr("style"); 
});

来源

2016-12-22 09:25:39 shibli049

为什么jquery验证不起作用

回答

相关问题