<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text" onchange="nuevoUsuario(this.value)" />
</body>
</html>
function registrarNombre(){
return true;
}
function nuevoUsuario(nombre){
alert(nombre)
/*verificarDisponibilidad(nombre).then(function(respuesta){
if (respuesta){ //Cero equivale a "false"
registrarNombre();
}
else{
alert("El nombre ya se encuentra registrado");
}
});*/
}
function verificarDisponibilidad(nombre){
return new Promise(function(exito, error){
var xhr=nuevoAjax()
xhr.open("POST", "http://localhost:8080/Front/CompruebaNombreUsuario", true);
xhr.send(nombre);
xhr.addEventListener("load", function(){
if (this.status == 200){
exito(this.responseText); //La respuesta será el número de coincidencias del nombre en la base de datos
}
}, false);
});
}
function registrarse() {
//se crea una clase persona y una clase usuario que hereda propiedades de esta
function persona(nombre, apellido1, apellido2, DNI) {
this.nombre = nombre;
this.apellido1 = apellido1;
this.apellido2 = apellido2;
this.DNI = DNI;
}
usuario.prototype = new persona;
function usuario(nombreUsuario, password, email, telefono, nombre, apellido1, apellido2, DNI) {
persona.call(this, nombre, apellido1, apellido2, DNI)
this.nombreUsuario = nombreUsuario;
this.password = password;
this.email = email;
this.telefono = telefono;
}
//se crea un metodo para enviar los datos de cada objeto usuario al servidor
usuario.prototype.enviaInfo = function () {
return "login=" + this.nombreUsuario + "&password=" + this.password + "&nombre=" + this.nombre + "&apellido1=" + this.apellido1 + "&apellido2=" + this.apellido2 + "&DNI=" + this.DNI + "&email=" + this.email + "&telefono=" + this.telefono;
}
/*creo un metodo a partir de la clase string. Por la posibilidad de los dispositivos moviles
tengan configurado de que la primera letra de cada frase empiece por mayusculas. Posteriormente le pasare el metodo toLowerCase por si hubieran mas letras en minusculas.
Podria haber pasado el metodo toLowrString directamente, pero me hacia ilusion crear ese metodo. :)*/
String.prototype.ToLowerFirstCase = function () {
primeraLetra = this.substring(0, 1)
return this.replace(nombreUsuario.substring(0, 1), primeraLetra.toLowerCase());
}
/*Aqui se recogen el valor de las variables y se llamara a la funcion para validar uno a uno los datos
a ver si son correctos*/
/*utilizo el metodo trim() por si el usuario introduciera un espacio en blanco sin querer para que no hayan
problemas al interactuar con la base de datos al hacer consultas sobre ese dato guardado*/
var nombreUsuario= document.getElementById("nameUser").value.trim();
var password1 = document.getElementById("password1").value.trim();
var password2 = document.getElementById("password2").value.trim();
var nombre = document.getElementById("nombre").value.trim();
var apellido1 = document.getElementById("apellido1").value.trim();
var apellido2 = document.getElementById("apellido2").value.trim();
var DNI = document.getElementById("DNI").value.trim();
var email = document.getElementById("email").value.trim();
email = email.toLowerCase();
var telefono = document.getElementById("TLF").value.trim();
var formulario = validarFormulario(usuario, password1, password2, nombre, apellido1, apellido2, DNI, email, telefono)
var compruebaNombreUsuario=registrarNombre();
//llamo al constructor usuario y creo un nuevo objeto usuario
//implemento el metodo creado con prototype sobre la variable email
var usuario= new usuario(nombreUsuario, password1, email.ToLowerFirstCase(), telefono, nombre, apellido1, apellido2, DNI)
//se comprueba de si no han habido errores en el formulario se prepara el envio de datos al servidor
if (formulario == true&&compruebaNombreUsuario==true) {
//con esta linea al enviar el formlario el boton de enviar se vuelve no accesible
//datos que se recogen del metodo de la clase usuario para el envio por POST:
var datos = usuario.enviaInfo();
var xhr = nuevoAjax();
var url = "Registro";
xhr.open("POST",url, true );
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(datos);
alert("Se ha dado de alta")
}
}
Output
300px
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |