Question

我有以下html和javascript：

HTML：

<div class="container">
  <div class="row">
  <div class="col-md-6 col-md-offset-3">
    <div class="well">
      <form id="registration-form" class="text-center" method="post" role="form">
        <h1>Registro</h1>
        <hr>
          <div class="form-group">
          <label class="control-label" for="username">Nombre de Usuario</label>
           <input type="text" class="form-control" placeholder="nombre" name="username"          id="username" autofocus>
    </div>
    <div class="form-group">
      <label class="control-label" for="useremail">Correo</label>
      <input type="email" class="form-control" placeholder="correo" name="useremail" id="useremail">
    </div>
    <div class="form-group">
      <label class="control-label" for="userpassword">Contraseña</label>
      <input type="password" class="form-control" placeholder="contraseña" name="userpassword" id="userpassword">
    </div>
    <hr>
      <button type="submit" name="cmdNewUserRegister" id="cmdNewUserRegister" class="btn btn-success">Registrar</button>
  </form>
  </div>
</div>

以下jQuery：

var application = {

  init: function(){
    $('#username, #userpassword, #useremail').on('keyup', isEmpty);
    $('#useremail').on('keyup', isEmail);
  },
  isEmpty: function(){
    if($(this).val().length > 0){
      $(this).parent().addClass('has-success').removeClass('has-error');
    } else $(this).parent().removeClass('has-success').addClass('has-error');
  },
  isEmail: function(){
    var emailRegex = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    if(emailRegex.test($(this).val())){
      $(this).parent().removeClass('has-error').addClass('has-success');
    } else $(this).parent().removeClass('has-success').addClass('has-error');
  }
};

$(document).ready(function(){
  //se inicializa el objeto: 
  application.init();
  //validación de correo
});

显然，由于未应用类，因此无法正常工作。任何人都可以发现问题，这里有一支关于它的笔：

Codepen Sample

Answer 1

isEmpty和isEmail未定义。您需要分别用application.isEmpty和application.isEmail替换它们。

Answer 2

正如@Rahil Wazir所建议的那样，只需在isEmpty和isEmail之前添加它并且可以正常工作：

//declaremos una variable que será nuestro objeto y alojará todos los métodos de validación

var application = {
  //Nuestro primer método, el que inicializa todo
  init: function(){
    $('#username, #userpassword, #useremail').on('keyup', this.isEmpty);
    $('#useremail').on('keyup', this.isEmail);
  },
  isEmpty: function(){
    if($(this).val().length > 0){
      $(this).parent().addClass('has-success').removeClass('has-error');
    } else $(this).parent().removeClass('has-success').addClass('has-error'); 
  },
  isEmail: function(){
    var emailRegex = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    if(emailRegex.test($(this).val())){
      $(this).parent().removeClass('has-error').addClass('has-success');
    } else $(this).parent().removeClass('has-success').addClass('has-error');
  }
};

$(document).ready(function(){
  //se inicializa el objeto: 
  application.init();
  //validación de correo
});

经过测试，请注意@Scimonster和@Rahil Wazir首先给出的有效答案。

jquery无法识别$（this）

2 个答案: