First look at the effect of the login page I made:
- Commonly used login pages are to verify user name, password, confirm password, check gender, personal description, and so on. But the principle is similar. When verifying these conditions, you also need to consider whether the user experience is good. Let me talk about my approach to the above form validation.
Article Directory
1 Introduction
Knowledge points that the form needs to use: CSS+div page layout+js
2. Page background image
页面背景图就是将原图片按照一定比列占满整个浏览器。
body {
background-image: url(img/bg_268dc65.jpg);
background-size: 100% 100%;
}
3. Layout of the login page
登录页面的布局始终固定在浏览器的中间位置。
.wrap {
width: 500px;
height: 450px;
margin: 100px auto;
text-align: center;
background-color: #6c8cff;
opacity: 0.8;
border: 0px black solid;
}
4. The layout of the form
Take an input tag as an example. The layout of other labels in turn.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrap{
width: 300px;
height: 150px;
border: 1px black solid;
}
.big{
width: 100%;
height: 60px;
border: 1px gold solid;
}
#userBlur{
/* input标签的宽度占div标签的75% 如果超过这个范围就会元素换行 */
width: 75%;
height:30px;
border: 1px red solid;
}
#small{
width: 100%;
height: 25px;
border: 1px black solid;
}
</style>
</head>
<body>
<div class="wrap">
<form action="#" method="get">
<div class="big">
<span>用户名:</span>
<input type="text" name="username" value="" id="userBlur"/>
<!-- 这个div标签是为了提示用户输入格式! -->
<div id="small"></div>
</div>
</form>
</div>
</body>
</html>
The following shows all my login layout code:
- CSS code
<style type="text/css">
body {
background-image: url(img/bg_268dc65.jpg);
background-size: 100% 100%;
}
.wrap {
width: 500px;
height: 450px;
margin: 100px auto;
text-align: center;
background-color: #6c8cff;
opacity: 0.8;
border: 0px black solid;
}
#wrap_01 {
width: 100%;
height: 30px;
border: 1px black solid;
margin-top: 10px;
}
#userBlur {
width: 80%;
height: 30px;
border: 1px black solid;
}
#wrap_02 {
margin-top: 30px;
width: 100%;
height: 30px;
border: 0px black solid;
}
#pwdBlur {
width: 80%;
height: 30px;
border: 0px black solid;
}
#wrap_03 {
margin-top: 30px;
width: 100%;
height: 30px;
border: 0px black solid;
}
#pwdBlur2 {
width: 80%;
height: 30px;
border: 0px black solid;
}
#wrap_04 {
margin-top: 30px;
width: 100%;
height: 30px;
border: 0px black solid;
}
#wrap_05 {
width: 100%;
height: 150px;
border: 0px black solid;
text-align: center;
margin-left: 24px;
}
#wrap_06 {
margin-top: 8px;
width: 100%;
height: 30px;
border: 0px black solid;
text-align: center;
line-height: 30px;
}
</style>
- form code
<div class="wrap">
<!-- οnsubmit="return false" 可以阻止表单提交-->
<form action="#" method="get" onsubmit="return submitForm()" id="formSet">
<span id="p_login" style="width: 100%; height: 30px; font-family: 隶书; font-size: 30px; ">欢迎登录</span>
<div id="wrap_01">
<span>用 户 名: </span>
<!-- onblur就是鼠标失去焦点的时候会触发事件这个逻辑需要你自己来写 -->
<input type="text" id="userBlur" value="" name="username" placeholder="请输入用户名" onblur="check_username()" oninput="input_content()" />
<div id="p_context" style="width:230px; height: 25px; border: 0px black solid; margin: auto;"></div>
</div>
<div id="wrap_02">
<span>密 码: </span>
<input type="password" id="pwdBlur" value="" name="password" placeholder="请输入密码" onblur="check_password()" oninput="input_content2()" />
<div id="p_context2" style="width:200px; height: 25px; border: 0px black solid; margin: auto;"></div>
</div>
<div id="wrap_03">
<span>确认密码:</span>
<input type="password" id="pwdBlur2" placeholder="确认密码" onblur="check_password2()" />
<div id="p_context3" style="width:200px; height: 25px; border: 0px black solid; margin: auto;"></div>
</div>
<div id="wrap_04">
<span>性别:</span>
<input type="radio" name="sex" value="male" id="sex_01" onclick="clickSex()">男
<input type="radio" name="sex" value="female" id="sex_02" onclick="clickSex()" style="display: inline;">女
<div id="p_context5" style="width:230px; height: 25px; border: 0px black solid;margin-left: 280px; margin-top: -22px;" ></div>
</div>
<div id="wrap_05">
<div id="move">个人描述:</div>
<textarea cols="50" rows="7" onblur="checkText()" id="text_area"></textarea>
<div id="p_context4" style="width:200px; height: 25px; border: 0px black solid; margin: auto;"></div>
</div>
<div id="wrap_06">
<input type="submit" value="注册" id="check_pwd" />
<input type="button" value="重置" onclick="formReset()" />
</div>
</form>
</div>
5.js verification of the form
User name, password, confirmation password, gender, and personal description can be submitted only after filling in the form, otherwise the user will be prompted to fill in the information according to the specific requirements. Need to use the onsubmit event to return the result to be true, then submit the form data, otherwise fill in the format according to the format.
5.1 Verify user name
Knowledge points: 1. The onblur event triggers the event when the mouse leaves the input box
Knowledge points: 2. oninput event user input trigger event
We only need to get the user name entered by the user name and use regular expressions to check whether it meets the rules of the expression set by ourselves. If the user name is correct, it will show that the user name is correct, otherwise the format of the user name will be displayed incorrectly. You can also use the oninput event to display the format of the user name when the user name is input; this way the user experience will be better.
//校验用户名
function check_username() {
//获取DOM对象
var username = document.getElementById("userBlur").value;
//用户名的正则表达式
var regx = /^[a-zA-Z0-9]{4,16}$/;
//校验用户名符不符合条件 返回true 或者 false
var result = regx.test(username);
if (!result) {
document.getElementById("p_context").innerHTML = "<div style='color: red;'>用户名格式不正确！</div>"
document.getElementById("userBlur").style = "border:2px red solid"
} else {
document.getElementById("p_context").innerHTML = "<div>用户名格式正确！</div>"
document.getElementById("userBlur").style = "border:2px black solid"
}
return result;
}
//提示用户输入用户名的格式
function input_content() {
document.getElementById("p_context").innerHTML = "<div>用户名必须为4-16位数字或字母</div>"
}
5.2. Verify password
The verification password is the same as the verification user name!
var password;
var res;
//校验密码
function check_password() {
//获取DOM对象
password = document.getElementById("pwdBlur").value;
//密码的正则表达式
var regx = /^[1-9]{6,10}$/;
//校验密码符不符合条件 返回true 或者 false test() 方法用于检测一个字符串是否匹配某个模式.
res = regx.test(password);
if (!res) {
document.getElementById("p_context2").innerHTML = "<div style='color: red;'>密码必须为6-10位数字!</div>"
document.getElementById("pwdBlur").style = "border:2px red solid"
} else {
document.getElementById("p_context2").innerHTML = "<div>密码格式正确!</div>"
document.getElementById("pwdBlur").style = "border:2px black solid"
}
return res;
}
//提示用户输入密码的格式
function input_content2() {
document.getElementById("p_context2").innerHTML = "<div>密码必须为6-10位数字</div>"
}
5.3 Secondary verification password
When reconfirming the password entered in the user name, the first password needs to be increased in scope, otherwise the first password will not be obtained during the second verification. The main judgment here is whether the confirmed password is empty and whether it is twice password. Inconsistent.
//第二次校验密码
var pwd;
function check_password2() {
pwd = document.getElementById("pwdBlur2").value;
if (pwd.length == 0) {
document.getElementById("p_context3").innerHTML = "<div style='color: red;'>密码不能为空!</div>"
document.getElementById("pwdBlur2").style = "border:2px red solid"
return false;
} else if (pwd != password) {
document.getElementById("p_context3").innerHTML = "<div style='color: red;'>两次密码不一致！</div>"
document.getElementById("pwdBlur2").style = "border:2px red solid"
return false;
} else {
document.getElementById("p_context3").innerHTML = "<div>两次密码一致！</div>"
document.getElementById("pwdBlur2").style = "border: 2px black solid"
return true;
}
}
5.4 Verify that the username is checked
Knowledge point: checked if the trigger event is selected
If the user does not check the box, the user is prompted to check the gender but the form cannot be submitted, and the check box can proceed to the next step.
function clickSex() {
//如果选中了就返回true
if (document.getElementById("sex_01").checked) {
document.getElementById("p_context5").innerHTML = ""
return true;
} else if (document.getElementById("sex_02").checked) {
document.getElementById("p_context5").innerHTML = ""
return true;
} else {
document.getElementById("p_context5").innerHTML = "<div style='color: red;'>未选择性别!</div>"
return false;
}
}
5.5 Verify that the number of words in the text field is not less than 50 words
When verifying the number of words, you need to use the trim() method to remove dots and spaces and then get the length. Judging by the length, it is less than 50 words to prompt the user and the form data cannot be submitted until it is correct.
//校验文本域的字数
function checkText() {
var len = document.getElementById("text_area").value.trim().length;
if (len < 50) {
document.getElementById("p_context4").innerHTML = "<div style='color: red;'>个人描述不能少于50字！</div>"
document.getElementById("text_area").style = "border:2px red solid"
return false;
} else {
document.getElementById("p_context4").innerHTML = ""
document.getElementById("text_area").style = "border:2px black solid"
return true;
}
}
5.6 Reset form data
// 重置表单
function formReset() {
document.getElementById("formSet").reset()
}
If you do not fill in the data or one item does not meet the format requirements, the form cannot be submitted.
6 Summary:
The validation of the form is mainly about layout, flexible application of events and user experience.
- Master the DOM
- Master some common events
- Tips for page layout
- Code reusability and logic
There are also many shortcomings in this blog. Please advise. If you have any questions, please share with us and increase your knowledge.