2

フォームを検証していますが、検証はフィールドごとに行われ、送信時にすべてのフィールドを一度に検証したい

これはドキュメントの準備ができていない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('.@',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/

4

2 に答える 2

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;
});
于 2016-11-16T14:47:41.433 に答える