2017-08-10 19 views
0

我使用向导单击下一步按钮不检查使用正则表达式验证电子邮件。 我已经使用开关盒第一空白输入显示错误,否则进入下一步,并添加电子邮件输入值错误后不检查电子邮件这个值在Reg如何解决这个问题。如何查看电子邮件有效性?

<form> 
    <div class="form-main"> 
    <div class="form-input"> 
     <input type="text" id="fname" placeholder="First Name"> 
     <p id="error"></p> 
    </div> 
    <div class="form-input"> 
     <input type="text" id="lname" placeholder="Last Name"> 
     <p id="error"></p> 
    </div> 
    <div class="form-input"> 
     <input type="email" id="email" placeholder="Email"> 
     <p id="error"></p> 
    </div> 
    <div class="form-input"> 
     <input type="password" id="password" placeholder="Password"> 
     <p id="error"></p> 
    </div> 
    <div class="form-btn"> 
     <button type="button" id="prev" onClick="prevBtn(this);">prev</button> 
     <button type="button" id="next" onClick="nextBtn(this);">next</button> 
     <button type="submit" id="submit">submit</button> 
    </div> 
    </div> 
</form> 

首先是让变量的正则表达式中进行函数emailValidate名称,在此功能中采用可变mailFormate这回文本电子邮件。此功能用于切换情况下,如果输入值为空白,则显示错误,否则检查输入类型文本和电子邮件,但电子邮件为空白如果添加电子邮件格式时显示错误,则不检查RegEx跳过下一步如何解决此问题。

$(window).on('load',function(){ 
     $('.form-main > .form-input:nth-child(1)').addClass('open'); 
     $('.form-main > .form-input:not(".open")').addClass('close').hide();  
    }); 

    var $div = $('.form-input'); 
    var submits = $('#submit').css('display','none'); 
    index = 0; 

    function updateStatus(a){ 
     $div.eq(index).removeClass('current').addClass('close').hide(); 
     index += a; 
     $div.eq(index).addClass('current').removeClass('close').show(); 

     $('#next').toggle((index !==$div.length-1)); 
     $('#prev').toggle(index !== 0); 

     if(index == ($div.length - 1)){ 
      submits.toggle(index !== 0); 
     }else{ 
      submits.hide(); 
      } 
    } 

    var input = document.getElementsByTagName('input'); 
    var error = document.getElementById('error'); 

    var regEx = { 
     emailValidate : function emailValidate(email){ 
     var mailFormate = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
      return mailFormate.test(email); 
     } 
    } 


    function validation(){ 
     var inputValue = $('input:visible').val(); 
     var inputType = $(input).attr('type'); 

     if(inputValue !== ''){ 
     switch(inputType){ 
      case 'text' :{ 
       updateStatus(+1); 
      } 

      case 'email' :{ 
       var email = regEx.emailValidate(inputValue); 
        if(!email){ 
         error.innerHTML = "please enter valid mail"; 
         return false; 
        }else{ 
         error.innerHTML = "valid"; 
         updateStatus(+1); 
        } 
        break; 
       } 
       default : ''; 
      } 

     }else{ 
      $('input:visible').next().html("please enter the value"); 
      } 
    } 

    function nextBtn(){ 
     validation(); 
    } 

    function prevBtn(){ 
     updateStatus(-1); 
     error.innerHTML = ''; 
    } 
+0

你可以在输入标签中设置模式属性吧? – Jok3r

+0

是的,正确的mailFormate是电子邮件模式。 – Dhaval

+0

''点击“提交”检查电子邮件验证,如果电子邮件无效 –

回答

0

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<form> 
 
Email: <input type="email" name="country_code" pattern="^[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,4}$" > 
 
    <input type="submit"> 
 
</form> 
 

 

 
</body> 
 
</html>

试试这个,

+0

将显示相应的错误,这将自动生成错误警告,直到用户以正确的格式输入电子邮件,试试吧,祝你好运:) – Jok3r

+0

如果它为你工作,请投票给我的答案。比你:) – Jok3r

+0

但提交按钮显示最后一步和最后一步是密码,所以之前检查电子邮件验证他的有效,所以去下一步,我只使用正则表达式使用函数显示上面的JS代码的JavaScript。 – Dhaval

0

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/> 
 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js"></script> 
 
</head> 
 
<body> 
 

 
<form data-toggle="validator" role="form"> 
 
    
 
           <div class="form-group has-feedback"> 
 
            <label for="Email" class="control-label"><b>Email</b></label> 
 
            <input type="text" class="form-control" id="umail" data-minlength="5" placeholder="Email" name="umail" pattern="^[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,4}$" required> 
 
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span> 
 
            <div class="help-block with-errors"></div> 
 
           </div> 
 
          <input type="submit"> 
 
</form> 
 

 

 
</body> 
 
</html>

尝试。这是通过引导验证器插件完成的

+0

好吧,我尝试,但客户说不使用bootstrap.Thank你帮我 – Dhaval

+0

反正我的回答帮助你或不? – Jok3r

+0

有帮助我你的答案。 – Dhaval