爲什麼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驗證不起作用

回答

相關問題