2013-06-28 87 views
2

我正在驗證一個形式,但驗證通過場進了場,我想它來驗證一齊領域提交驗證一次使用jQuery

這裏所有的表單元素的JS代碼不裏面的文件準備

function checkUser(){ 
var userlen = $("#user").val().length; 
if(userlen<4){ 
    $("#user").css("background-color","#d2699b"); 
    return false; 
} 
else{ 
    $("#user").css("background-color","#0C9"); 
    return true; 
} 
} 

function checkEmail(){ 
var email = $("#email").val(); 
if((email.length < 6) || 
(email.indexOf('@',0) < 1) || 
(email.lastIndexOf('@') != email.indexOf('@',0)) || 
(email.lastIndexOf('@') > (email.length - 5)) || 
(email.lastIndexOf('.') > (email.length - 3)) || 
(email.lastIndexOf('.') < (email.length - 4)) || 
(email.indexOf('..',0) > -1) || 
(email.indexOf('@.',0) > -1) || 
(email.indexOf('[email protected]',0) > -1) || 
(email.indexOf(',',0) > -1)){ 
    $("#email").css("background-color","#d2699b"); 
    return false; 
} 
else{ 
    $("#email").css("background-color","#0C9"); 
    return true; 
} 
} 

function checkPhone(){ 
var phone = $("#phone").val(); 
if(!$.isNumeric(phone)){ 
    $("#phone").css("background-color","#d2699b"); 
    return false; 
} 
else{ 
    $("#phone").css("background-color","#0C9"); 
    return true; 
} 
} 

function checkCountry(){ 
var country = $("#country").val(); 
if(country == 0){ 
    $("#country").css("background-color","#d2699b"); 
    return false; 
} 
else{ 
    $("#country").css("background-color","#0C9"); 
    return true;  
} 
} 

function validate(){ 
if(!checkUser() || !checkEmail() || !checkPhone() || !checkCountry()){ 
    return false; 
} 
else{ 
    return true; 
} 
} 

和HTML代碼

<form method="post" action="data.php" onsubmit="return validate();"> 
<table width="40%" border="1"> 
<tr> 
<td>user</td> 
<td><input type="text" id="user" onblur="checkUser()" /></td> 
</tr> 
<tr> 
<td>email</td> 
<td><input type="text" id="email" onblur="checkEmail()" /></td> 
</tr> 
<tr> 
<td>phone</td> 
<td><input type="text" id="phone" onblur="checkPhone()" /></td> 
</tr> 
<tr> 
<td>country</td> 
<td><select id="country" onchange="checkCountry()"> 
<option value="0">choose</option> 
<option value="egypt">egypt</option> 
<option value="usa">usa</option> 
</select></td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td><input type="submit" id="save" value="save" /></td> 
</tr> 
</table> 
</form> 

代碼在行動:http://jsfiddle.net/JCtyJ/

+0

Ÿü沒有用validate.js。請不要浪費時間重新發明輪子,轉向,制動器或其他東西 http://validation.bassistance.de – madhairsilence

回答

1

使用你的代碼,你可以做這樣的:

DEMO

function validate(){ 
    $.each($('form :input'),function(){ 
     $(this).blur().change();   
    }); 
    if(!checkUser() || !checkEmail() || !checkPhone() || !checkCountry()){ 
     return false; 
    } 
    else{ 
     return true; 
    } 
} 
0
$(".vault_form").submit(function(e){ 
var fields = new Array("vault_user_first", "vault_user_last", "vault_country","vault_state","vault_city"); 
var i, l = fields.length; 
var fieldname; 
var reg_ex_text = /^[a-zA-Z ]+$/; 
for (i = 0; i < l; i++) { 
fieldname = fields[i]; 
if (!document.forms["update_userdetails"][fieldname].value.match(reg_ex_text)) 
    { 
    alert(document.forms["update_userdetails"][fieldname].value+' is not valid'); 
    e.preventDefault(e); 
    break; 
    } 
} 
return true; 
});