为什么 Jquery 验证不起作用

Question

我正在尝试在提交之前验证我的表单。但是，我不明白为什么下面的 jQuery 验证不起作用！ Fiddle here.

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();
    }

});

Answer 1

您的验证似乎有效（可能除了电子邮件验证）。但是，您的 jQuery 动画不是。这来自.animate() 上的 jQuery 页面：

所有动画属性都应动画为单个数值， 除非如下所述；大多数非数字属性不能 使用基本的 jQuery 功能（例如，宽度、高度、 or left 可以设置动画，但 background-color 不能设置，除非 使用 jQuery.Color() 插件）。

Answer 2

当您的Reg exp 得到修复时，您需要比较每个元素的值以匹配Reg exp 值..

这两种方法都可以，

function IsEmailAddressValid(emailAddress) {
  var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[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 */ 
}

您可以创建函数来匹配您单独的Reg exp 以实现可重用性。

或者您可以使用 Reg exp match 您的选择器值，就像我在这个 DEMO HERE 中所做的那样

我有点着急，所以我尽量掩饰。我已经编辑了您现有的一些代码。

仅供参考： 正则表达式可能会也可能不会给出想要的结果。寻找一个适合您的需求，一切都很好。希望对您有所帮助。

编辑：正如@Mike W 所提到的，你的 .animate() 没有在小提琴上工作，所以我用我的错误类替换了它。

Answer 3

您的 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");
});