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> </td>
<td><input type="submit" id="save" value="save" /></td>
</tr>
</table>
</form>
代碼在行動:http://jsfiddle.net/JCtyJ/
Ÿü沒有用validate.js。請不要浪費時間重新發明輪子,轉向,制動器或其他東西 http://validation.bassistance.de – madhairsilence