contenido
1. Piense: aprenda conocimientos de front-end
1. URL de GitHub de mi propio código
2. Academia SIKI: me refiero a este video para practicar
Sitio web oficial de 3.w3school: úsalo como diccionario
4. Tutorial para novatos: uso como diccionario
5. Web Front End Season 1 (HTML): mi propio blog para tomar notas
6. Web Front End Season 2 (CSS): mi propio blog de notas
7. Web Front End Season 3 (JavaScript): mi propio blog para tomar notas
Acción: 1: Éxito: 604-Escribir reglas de verificación de validación
1. Resultado de ejecución: éxito
Acción: 2: Éxito: 605 - Verificación de validación completada (fin de curso)
1. Resultado de ejecución: éxito
Primero, el propósito
1. Piense: aprenda conocimientos de front-end
2. Pensamiento: tome notas, la próxima vez que no necesite ver el video, solo mire las notas para recordar rápidamente.
2. Referencia
1. URL de GitHub de mi propio código
GitHub - xzy506670541/WebTest: interfaz web para SIKI Academy
2. Academia SIKI: me refiero a este video para practicar
Iniciar sesión - SiKi Academy - ¡La vida es interminable, el aprendizaje es infinito!
- Me refiero a este video para la práctica
Sitio web oficial de 3.w3school: úsalo como diccionario
4. Tutorial para novatos: uso como diccionario
Tutorial para principiantes: ¡aprender no es solo tecnología, sino también un sueño!
5. Web Front End Season 1 (HTML): mi propio blog para tomar notas
6. Web Front End Season 2 (CSS): mi propio blog de notas
7. Web Front End Season 3 (JavaScript): mi propio blog para tomar notas
3. Atención
Acción: 1: Éxito: 604-Escribir reglas de verificación de validación
1. Resultado de ejecución: éxito
Validación de formulario
1, validación del complemento jQuery: https://jqueryvalidation.org/
a. Internacionalización (la información de solicitud admite varios idiomas)
b. La validación es un complemento basado en jQuery, que contiene algunas funciones y funciones de jQuery.
2. Sintaxis
$(xx).validate({ reglas:{}, mensajes:{} }); 3, reglas:{ nombre de usuario:{ requerido:verdadero, longitud mínima:9, dígitos:verdadero , igual a :"[nombre='reusuario' ] " }, contraseña:{...} }
4. Si no hay mensajes, las indicaciones en inglés se darán de manera predeterminada. Si
se introduce el archivo message.js internacionalizado, tampoco puede escribir mensajes
:{ nombre de usuario:{ requerido: "Se debe completar el nombre de usuario", minlength : "La longitud mínima es de 9 dígitos", dígitos:"debe constar de dígitos" }, contraseña:{...} } 5, manejo del botón de radio: <label for="sex" class="error" style="display : ninguno;"> </etiqueta>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.min.js"></script>
<script type="text/javascript">
var validateRule = {
rules: {
// 对username的键值进行规则
username: {
required: true,
minlength: 3,
maxlength: 6
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 3,
maxlength: 6
},
rePassword: {
required: true,
equalTo: "[name='password']"
},
birthday: {
date: true
},
sex:{
required:true
}
}
};
$(function() {
$("#registerForm").validate(validateRule);
});
</script>
</head>
<body>
<form action="register.jsp" id="registerForm">
<table border="1" width="800px" height="500px">
<tr>
<td colspan="2" align="center">注册</td>
</tr>
<tr>
<td align="right" width="100px">用户名:</td>
<td align="left"> <input type="text" name="username" />
</td>
</tr>
<tr>
<td align="right">邮箱：</td>
<td> <input type="text" name="email" /></td>
</tr>
<tr>
<td align="right">密码：</td>
<td> <input type="password" name="password" /> </td>
</tr>
<tr>
<td align="right">重复密码：</td>
<td> <input type="password" name="rePassword" /> </td>
</tr>
<tr>
<td align="right">出生年月日：</td>
<td> <input type="text" name="birthday" /> </td>
</tr>
<tr>
<td align="right">性别：</td>
<td> 男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" />
<label for="sex" class="error"></label>
</td>
</tr>
<tr>
<td colspan="2" align="center"> <input type="submit" value="注册" /> </td>
</tr>
</table>
</form>
</body>
</html>
Acción: 2: Éxito: 605 - Verificación de validación completada (fin de curso)
1. Resultado de ejecución: éxito
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.min.js"></script>
<script type="text/javascript">
var validateRule = {
rules: {
// 对username的键值进行规则
username: {
required: true,
minlength: 3,
maxlength: 6
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 3,
maxlength: 6
},
rePassword: {
required: true,
equalTo: "[name='password']"
},
birthday: {
date: true
},
sex: {
required: true
}
},
// 自定义提示信息内容：代码格式和rules是差不多的
messages: {
username: {
required: "自定义提示：这个是必须填写的",
minlength: "自定义提示：最少输入3个字符！",
maxlength: "自定义提示：最多输入6个字符！"
}
}
};
$(function() {
$("#registerForm").validate(validateRule);
});
</script>
</head>
<body>
<form action="register.jsp" id="registerForm">
<table border="1" width="800px" height="500px">
<tr>
<td colspan="2" align="center">注册</td>
</tr>
<tr>
<td align="right" width="100px">用户名:</td>
<td align="left"> <input type="text" name="username" />
</td>
</tr>
<tr>
<td align="right">邮箱：</td>
<td> <input type="text" name="email" /></td>
</tr>
<tr>
<td align="right">密码：</td>
<td> <input type="password" name="password" /> </td>
</tr>
<tr>
<td align="right">重复密码：</td>
<td> <input type="password" name="rePassword" /> </td>
</tr>
<tr>
<td align="right">出生年月日：</td>
<td> <input type="text" name="birthday" /> </td>
</tr>
<tr>
<td align="right">性别：</td>
<td> 男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" />
<label for="sex" class="error"></label>
</td>
</tr>
<tr>
<td colspan="2" align="center"> <input type="submit" value="注册" /> </td>
</tr>
</table>
</form>
</body>
</html>