Question

我点击下一步按钮创建向导，不使用正则表达式检查验证电子邮件。我已经使用switch case第一个空白输入来显示错误，否则转到下一步并且在添加电子邮件输入值错误后不检查电子邮件中的这个值如何解决这个问题。

<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>

首先我在RegEx中为变量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 = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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 = '';
    }

Answer 1

<!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._%+-]+@[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>

试试这个。这是使用bootstrap验证器插件

完成的

Answer 2

＆＃13;

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

＆＃13;

试试这个，

如何查看电子邮件验证？

2 个答案: