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