我有一个问题，我正在制作一个网络应用程序，他们问我如果用户超过 18 岁，他们可以注册，如果没有，会出现一条消息。javascript的真相我知之甚少。如果你能帮助我，我将不胜感激，我留下表单的代码和我如何验证它的 js，谢谢：
形式：
<h:form id="formularioRegistro" class="form-horizontal">
<legend>Registro de usuarios</legend>
<!-- nombre-->
<div class="form-group">
<label class="col-md-4 control-label" for="nombre" >Nombres:</label>
<div class="col-md-6">
<input id="nombre" name="nombre" type="text" placeholder="" maxlength="30" class="form-control input-md" tabindex="1" ></input>
</div>
</div>
<!-- Apellido-->
<div class="form-group">
<label class="col-md-4 control-label" for="apellido">Apellidos:</label>
<div class="col-md-6">
<input id="apellido" name="apellido" type="text" maxlength="30" placeholder="" class="form-control input-md" tabindex="2"></input>
</div>
</div>
<!-- Documento-->
<div class="form-group">
<label class="col-md-4 control-label" for="documento">N° Documento:</label>
<div class="col-md-6">
<input id="documento" name="documento" type="text" maxlength="10" placeholder="" class="form-control input-md" tabindex="3"></input>
</div>
</div>
<!-- Email-->
<div class="form-group">
<label class="col-md-4 control-label" for="correo">Email:</label>
<div class="col-md-6">
<input id="correo" name="correo" type="email" class="form-control" placeholder="[email protected]" tabindex="4" ></input>
</div>
</div>
<!-- Contraseña-->
<div class="form-group">
<label class="col-md-4 control-label" for="contrasena">Contraseña:</label>
<div class="col-md-6">
<input id="contrasena" name="contrasena" type="password" class="form-control" placeholder="********" tabindex="5" ></input>
</div>
</div>
<!-- Confirmar contraseña-->
<div class="form-group">
<label class="col-md-4 control-label" for="repetirContraseña">Confirmar contraseña:</label>
<div class="col-md-6">
<input id="repetirContraseña" name="repetirContraseña" type="password" class="form-control" placeholder="********" tabindex="6"></input>
</div>
</div>
<!-- Direccion-->
<div class="form-group">
<label class="col-md-4 control-label" for="direccion">Dirección:</label>
<div class="col-md-6">
<input id="direccion" name="direccion" type="text" placeholder="" class="form-control input-md" maxlength="50" tabindex="7"></input>
</div>
</div>
<!-- Telefono-->
<div class="form-group">
<label class="col-md-4 control-label" for="tel">Teléfono:</label>
<div class="col-md-6">
<input id="tel" name="tel" type="text" maxlength="15" placeholder="" class="form-control input-md" tabindex="8"></input>
</div>
</div>
<!-- Ciudad -->
<div class="form-group">
<label class="col-md-4 control-label" for="ciudad">Ciudad:</label>
<div class="col-md-6">
<select id="ciudad" name="ciudad" class="form-control" tabindex="10" >
<option selected="true" disabled="true">Seleccione Ciudad...</option>
<c:forEach var="objCiudad" items="#{controladorCiudad.listarCiudades()}">
<option value="#{objCiudad.idCiudad}">#{objCiudad.nombreCiudad}</option>
</c:forEach>
</select>
</div>
</div>
<!-- Fecha -->
<div class="form-group">
<label class="col-md-4 control-label" for="fechaN">Fecha de Nacimiento:</label>
<div class="col-md-6">
<input id="fechaN" name="fechaN" type="date" placeholder="" class="form-control input-md" tabindex="11"></input>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="genero">Genero:</label>
<div class="col-md-6">
<select id="genero" name="genero" class="form-control" tabindex="10" >
<option selected="true" disabled="true">Seleccione Genero...</option>
<option value="Masculino">Masculino</option>
<option value="Femenino">Femenino</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<div class="checkbox">
<label class="col-md-5 control-label"></label>
<div class="col-md-8">
<label><input type="checkbox" id="confirmar" name="confirmar" ></input>Acepto términos y condiciones</label>
</div>
</div>
</div>
</div>
<div id="condicion" class="col-md-12">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
<u>Para registarse en Effective Orderrs debe diligenciar todos los campos</u>
</div>
<!-- Boton -->
<div id="boton">
<div class="form-group">
<label class="col-md-4 control-label" for="Boton"></label>
<div class="col-md-4">
<h:commandButton id="Boton" type="submit" class="btn btn-success" value="Registrarme" action="#{controladorUsuario.registrarUsuario()}" tabindex="12"></h:commandButton>
</div>
</div>
</div>
</h:form>
表格验证
$().ready(function () {
$('#formularioRegistro').formValidation({// Validación datos capa cliente. TENER PRESENTE EL ID DEL FORM
err: {container: 'tooltip'}, //muestra en tooltips
icon: {valid: 'fa fa-thumbs-up', invalid: 'fa fa-thumbs-down', validating: 'fa fa-refresh'}, //iconos
//locale: 'es_ES', //idioma - debe enlazar el archivo "es_ES.js"
fields: {
nombre: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese un nombre válido '
},
regexp: {
regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
message: 'Solo letras, sin números o caracteres especiales'
},
stringLength: {
min: 3,
message: 'Minimo 3'
}
}
},
apellido: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese un apellido válido'
},
regexp: {
regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
message: 'Solo letras, sin números o caracteres especiales'
},
stringLength: {
min: 3,
message: 'Minimo 3'
}
}
},
documento: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese un documento válido'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'Solo números'
},
stringLength: {
min: 5,
message: 'Minimo 5 caracteres'
}
}
},
correo: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese un correo válido'
},
regexp: {
regexp: /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/,
message: 'No se aceptan carecteres especiales'
},
stringLength: {
min: 5,
message: 'Minimo 5 caracteres'
}
}
},
contrasena: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese una contraseña válida'
},
regexp: {
regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9]+$/,
message: 'No se aceptan carecteres especiales'
},
stringLength: {
min: 5,
message: 'Minimo 5 caracteres'
}
}
},
repetirContraseña: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese una contraseña válida'
},
regexp: {
regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9]+$/,
message: 'No se aceptan carecteres especiales'
},
stringLength: {
min: 5,
message: 'Minimo 5 caracteres'
},
identical: {
field: 'contraseña',
message: 'Las contraseñas no coinciden'
}
}
},
direccion: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese una dirección válida'
},
regexp: {
regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9/\s/a-zA-ZñÑáéíóúÁÉÍÓÚ]+$/,
message: 'No se aceptan caracteres especiales'
},
stringLength: {
min: 10,
message: 'Minimo 10 caracteres'
}
}
},
tel: {//Validar con los aributos NAME de cada INPUT
row: '.form-group',
validators: {
notEmpty: {
message: 'Ingrese un telefono válido'
},
regexp: {
regexp: /^[0-9-]+$/,
message: 'Sólo numeros'
},
stringLength: {
min: 7,
message: 'Minimo 7 caracteres'
}
}
},
ciudad: {
validators: {
callback: {
message: 'Debe elegir su ciudad',
callback: function (value, validator, $field) {
// Get the selected options
var options = validator.getFieldElements('ciudad').val();
return (options !== null && options.length >= 1 && options.length <= 4);
}
}
}
},
genero: {
validators: {
callback: {
message: 'Debe elegir su genero',
callback: function (value, validator, $field) {
// Get the selected options
var options = validator.getFieldElements('genero').val();
return (options !== null && options.length >= 1 && options.length <= 10);
}
}
}
},
'confirmar[]': {
row: '.form-group',
validators: {
notEmpty: {
message: 'Debe aceptar terminos y condiciones'
},
stringLength: {
max: 1,
message: 'Debe aceptar terminos y condiciones'
}
}
}
}
});
});
在您的情况下，您应该编写一个新的验证器
编写新的验证器
在 moment.js 的帮助下，您可以计算生日以查看它是否大于 18 并使自定义验证正确通过。