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>

我正在尝试验证电子邮件和网址的空输入字段和正则表达式验证。的 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功能进行动画处理（例如，宽度，高度，或左边可以动画，但背景颜色不能，除非使用了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以便重新使用的功能。

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

我很匆忙，所以尽量掩饰。我已经编辑了一些你现有的代码。

FYI：正则表达式可能会也可能不会产生预期结果。寻找一个适合您需求的产品。希望有所帮助。

编辑：正如@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");
});

为什么Jquery验证不起作用

3 个答案: