content
1. Think: learn front-end knowledge
2. SIKI Academy: I refer to this video for practice
3.w3school official website: use it as a dictionary
4. Rookie Tutorial: Use as a Dictionary
5. Web Front End Season 1 (HTML): My own note-taking blog
6. Web Front End Season 2 (CSS): My own note blog
7. Web Front End Season 3 (JavaScript): My own note-taking blog
Action: 1: Success: 604-Write validation check rules
Action: 2: Success: 605 - Validation verification completed (end of course)
First, the purpose
1. Think: learn front-end knowledge
2. Thinking: Take notes, next time you don't need to watch the video, just look at the notes to quickly recall.
2. Reference
1. GitHub URL of my own code
GitHub - xzy506670541/WebTest: Web Frontend for SIKI Academy
2. SIKI Academy: I refer to this video for practice
Login - SiKi Academy - Life is endless, learning is endless!
- I refer to this video for practice
3.w3school official website: use it as a dictionary
4. Rookie Tutorial: Use as a Dictionary
Rookie Tutorial - Learning is not only technology, but also a dream!
5. Web Front End Season 1 (HTML): My own note-taking blog
6. Web Front End Season 2 (CSS): My own note blog
7. Web Front End Season 3 (JavaScript): My own note-taking blog
3. Attention
Action: 1: Success: 604-Write validation check rules
1. Running result: success
Form validation
1, jQuery plug-in validation: https://jqueryvalidation.org/
a. Internationalization (prompt information supports multiple languages)
b. Validation is a jQuery-based plug-in, which contains some jQuery functions and functions.
2. Syntax
$(xx).validate({ rules:{}, messages:{} }); 3, rules:{ username:{ required:true, minlength:9, digits:true , equalTo :"[name='reusername'] " }, password:{...} }
4. If there are no messages, an English prompt will be given by default. If
the internationalized message.js file is introduced, you can also not write messages
messages:{ username:{ required: "User name must be filled in", minlength: "The minimum length is 9 digits", digits:"must consist of digits" }, password:{...} } 5, radio button handling: <label for="sex" class="error" style="display: none;"> </label>
<!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>
Action: 2: Success: 605 - Validation verification completed (end of course)
1. Running result: success
<!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>