Home / Questions / 19896
Accepted
Alan
Asked: 2020-08-09 07:01:22 +0800 CST 2020-08-09 07:01:22 +0800 CST

Подтвердить электронную почту с помощью функции в javascript

  • 772

Я хочу проверить электронные письма, которые у меня есть в текстовом поле, но я не нашел, почему это дает мне ошибку, когда электронное письмо должно быть действительным, для этого я использую скрипт.
Это то, что я делаю

// funcion para validar el correo
function caracteresCorreoValido(email, div){
    console.log(email);
    var email = $(email).val();
    var caract = new RegExp(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/);

    if (caract.test(email) == false){
        $(div).hide().removeClass('hide').slideDown('fast');

        return false;
    }else{
        $(div).hide().addClass('hide').slideDown('slow');
//        $(div).html('');
        return true;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <div class="panel-body">
                    <form class="form-horizontal m-t-20 toggle-disabled" onsubmit="validacionLogin(); return false;" method="post" >

                        <div class="form-group">
                            <div class="col-xs-12">
<!--                                <label class="control-label">E-mail</label>-->
                                <input class="form-control input-lg" type="email" id="email" name="email" data-validation="email"  placeholder="Introduce tu correo electronico">
                                <div id="xmail" class="hide"><h6 class="text-danger">Ingresa un email valido</h6></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-12">
<!--                                <label class="control-label">Contraseña</label>-->
                                <input class="form-control input-lg" type="password" id="password" name="password" data-validation="required" placeholder="Contraseña">
                            </div>
                        </div>

                        <div class="form-group text-center m-t-40">
                            <div class="col-xs-12">
                                <button type="submit" class="btn btn-primary btn-lg w-lg waves-effect waves-light" >Iniciar sesión</button>
                            </div>
                        </div>

                    </form> 
                </div>

<script>
   // cuando pierde el foco, este valida si lo que esta en el campo de texto si es un correo o no y muestra una respuesta
   $('form').find('input[type=email]').blur(function(){
      caracteresCorreoValido($(this).val(), '#xmail')
    });
</script>

javascript

4 Answers

  1. Best Answer

    Эта строка кода осталась:

    var email = $(email).val();

    Вы уже передаете emailего как строку при вызове функции, вам не нужно пытаться прочитать его снова (что приведет к потере значения электронной почты и сбою логики вашего сообщения).

    Сделав это изменение, теперь он работает нормально:

    // funcion para validar el correo
function caracteresCorreoValido(email, div){
    console.log(email);
    //var email = $(email).val();
    var caract = new RegExp(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/);

    if (caract.test(email) == false){
        $(div).hide().removeClass('hide').slideDown('fast');

        return false;
    }else{
        $(div).hide().addClass('hide').slideDown('slow');
//        $(div).html('');
        return true;
    }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-body">
  <form class="form-horizontal m-t-20 toggle-disabled" onsubmit="validacionLogin(); return false;" method="post" >

    <div class="form-group">
      <div class="col-xs-12">
        <!--<label class="control-label">E-mail</label>-->
        <input class="form-control input-lg" type="email" id="email" name="email" data-validation="email"  placeholder="Introduce tu correo electronico">
        <div id="xmail" class="hide"><h6 class="text-danger">Ingresa un email valido</h6></div>
      </div>
    </div>

    <div class="form-group">
      <div class="col-xs-12">
        <!--<label class="control-label">Contraseña</label>-->
        <input class="form-control input-lg" type="password" id="password" name="password" data-validation="required" placeholder="Contraseña">
      </div>
    </div>

    <div class="form-group text-center m-t-40">
      <div class="col-xs-12">
        <button type="submit" class="btn btn-primary btn-lg w-lg waves-effect waves-light" >Iniciar sesión</button>
      </div>
    </div>

  </form> 
</div>

<script>
  // cuando pierde el foco, este valida si lo que esta en el campo de texto si es un correo o no y muestra una respuesta
  $('form').find('input[type=email]').blur(function(){
    caracteresCorreoValido($(this).val(), '#xmail')
  });
</script>

    • 8

  2. возможно, ответ не имеет ничего общего с JavaScriptчистым и необработанным, как было запрошено, однако для вопросов проверки inputsя считаю, что им следует поделиться: D

    Прежде чем продолжить, я хочу прояснить, что реализация браузерами достаточно широка, чтобы ее можно было легко использовать, проверьте здесь: http://caniuse.com/#search=email

    body {
    padding-top: 15px;
}
div {
    width: 400px;
}
label {
    display: inline-block;
    width: 100px;
    text-align: right; 
    margin-bottom: 10px;
    margin-right: 3px;
}

.buttons {
    padding-top: 10px;
    text-align: center;
}
    <form>
    <div>
        <label for="name">Nombre:</label>
        <input type="text" required />
    </div>

    <div>        
        <label for="comments">Correo:</label>
        <input type="email" id="email" required />
    </div>
    
    <div class="buttons">
        <input type="submit" value="Submit" />
    </div>
</form>

    • 7

  3. Старайтесь не совпадать с результатом теста и делайте это как вызов функции

    function caracteresCorreoValido(email, div){
    console.log(email);

    var caract = new RegExp(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/);

    if (! caract.test(email)){
        $(div).hide().removeClass('hide').slideDown('fast');

        return false;
    }else{
        $(div).hide().addClass('hide').slideDown('slow');
//        $(div).html('');
        return true;
    }
}
    • 1 
  4. $('#correo').change(function (e) {
    var emailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    var EmailId = this.value;
    if (emailRegex.test(EmailId))
        this.style.backgroundColor = "";
    else
        this.style.backgroundColor = "LightPink";
});
    • 0