0

我的目的是用户只输入电子邮件或手机号码。我在 OR 逻辑中通知用户的代码部分成功

但是......如果用户想把这两个细节都给我电子邮件和手机号码。并错误地输入了该信息，然后他/她将通知该信息以更新数据。

<form action="index.php" method="post">
    <label for="email">Your E-Mail Address *</label>
       <input id="UserEmail" type="text" name="email" maxlength="80" size="30"/>
            </p><p>
             Or   
             </p><p>
    <label for="mobile">Mobile Number *</label>
     <input id="mobile" type="text" name="mobile" maxlength="50" size="30" /></p>

下面是jquery代码

var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal = $("#UserEmail").val();

// email & mobile input cheak
if(emailaddressVal == '' && $("#mobile").val() == '') {
    $("#UserEmail").after('<p><span class="error">Please enter your email address.</span></p>')
    $("#mobile").after('<p><span class="error">Please enter your Mobile number.</span></p>')
    hasError = true;
}  
// validating currect email
else if(!emailReg.test(emailaddressVal)) {
    $("#UserEmail").after('<p><span class="error">Enter a valid email address.</span></p>') 
    hasError = true;
} 
// Mobile number
else if( $("#mobile").val()) {
    $("#mobile").after('<p><span class="error">Enter currect Mobile number.</span></p>')
    hasError = true;
}
4

2 回答 2

0

您可以使用单选按钮轻松解决您的问题：

<form name="form1" action="" method="post" onsubmit="return !checkForm()">
<input type="radio" name="em" value="email" /> <label>Email <input type="text" name="email" value="name@server.ext" onclick="this.form.em[0].checked=true" /></label> <p></p><br/>
<input type="radio" name="em" value="mobile" checked="checked" /> <label>Mobile <input type="text" name="mobile" value="1234567890" onclick="this.form.em[1].checked=true" /></label> <p></p><br/>
<input type="submit" name="save_form" value="Send" />
</form>

然后你的 javascript 看起来像这样：

function checkForm(){
    var form = document.forms.form1;
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var mobileReg = /^[+]?[()/0-9. -]{9,}$/;
    var emailaddressVal = form.email.value.replace(/^\s+|\s+$/g,"");
    var mobilenumberVal = form.mobile.value.replace(/^\s+|\s+$/g,"");
    var valid1 = emailReg.test(emailaddressVal); //email
    var valid2 = mobileReg.test(mobilenumberVal); //mobile
    if (form.em[0].checked && !valid1) { //invalid email
        $(form.email).parent().next("p").html('<span class="error">Enter a valid email address.</span>');
        hasError = true;
    } else {
        $(form.email).parent().next("p").html('');
    }
    if (form.em[1].checked && !valid2) { // invalid mobile
        $(form.mobile).parent().next("p").html('<span class="error">Enter currect Mobile number.</span>')
        hasError = true;
    } else {
        $(form.mobile).parent().next("p").html('');
    }
    //alert('Error='+hasError +' EmailOk='+ valid1+ ' MobileOk='+ valid2);
    return hasError;
}

这是工作代码。

于 2012-07-02T00:03:35.590 回答
0

解决方案在这里 

    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var mobileReg =  /^\d\d\d\d\d\d\d\d\d\d$/m;
    var emailaddressVal = $("#UserEmail").val();
    var mobileval = $("#mobile").val();

   //state chk both blank if yes alert
   //OR logic 0-0 
    if(emailaddressVal == '' && mobileval == '') {
        $("#UserEmail").after('<p><span class="error blurry">Please enter your email address.</span></p>')
        .effect("shake", { times:3 }, 20); console.log("email");
        $("#mobile").after('<p><span class="error blurry">Please enter your Mobile number.</span></p>')
        .effect("shake", { times:3 }, 20); console.log("mobile");
        hasError = true;
    }

    //chk mobile have value but not email
    //OR logic 1-0 
    else if(!mobileReg.test(mobileval) && emailaddressVal == '') {
        $("#mobile").after('<p><span class="error blurry">Enter currect Mobile number.</span></p>')
        .effect("shake", { times:3 }, 20);console.log("currect mobile");
         hasError = true;
    }
    //chk mobile dont hv the value but email have
    //OR logic 0-1 
    if(!emailReg.test(emailaddressVal) && mobileval == '') {
        $("#UserEmail").after('<p><span class="error blurry">Enter a valid email address.</span></p>')
        .effect("shake", { times:3 }, 20); console.log("valid email");

        hasError = true;


    }
    //chk the input mobile & email have value
    //OR logic 1-1 
    else        
    if(!emailReg.test(emailaddressVal) &&!mobileReg.test(mobileval)) {
        $("#UserEmail").after('<p><span class="error blurry">Enter a valid email address.</span></p>')
        .effect("shake", { times:3 }, 20); console.log("valid email combination");

        $("#mobile").after('<p><span class="error blurry">Enter currect Mobile number.</span></p>')
        .effect("shake", { times:3 }, 20);console.log("currect mobile combination");

        hasError = true;


    }
于 2012-07-03T05:30:51.617 回答