jQuery development login tutorial jquery verification
In the first section, we talked about the steps of using jquery to develop form verification, that is, the flow chart, the layout of the page and the css. We have already completed them.
The next step is to introduce jquery files and write jquery The code
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
Note: If your jquery.js file is not in the same directory as the form.html file, you need to pay attention to writing the correct path
Let’s take a look below, we need to verify the user name and password of the form
If it is not filled in, then we click to log in. This is wrong, so we give a prompt message
<script>
$("#but").click(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
</script>Look at the above code, we get the content of the text box of the user name. If is empty, we will add prompt text to the first span tag. If it is not empty, the span content will have no content
When we click the button to log in without inputting content, then the span tag will also have Prompt information, when I enter content in the text box, after the input is completed, click elsewhere on the page, the prompt text of the span tag will not be
At this time, we trigger a change event, the code is as follows:
<script>
$("input").change(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
</script>At this point, we have completed the simple verification of a login page
I will post the complete code below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面的验证</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#bdy{width:100%;height:950px;background:#999;}
#dv{position:absolute; top:40px;left:20px;width:300px;height:250px;background:#f44;}
#con{width:300px;height:200px;margin-left:35px;margin-top:35px;font-family:"隶书";font-size:18px;}
#but{width:230px;height:30px;margin-top:15px;border:1px solid #ccc;background:#f60;font-family:"隶书";
font-size:18px;}
#but:hover{background:#f66;}
span{margin-left:80px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="bdy">
<div id="dv">
<div id="con">
<form method="post" action="#">
用户名：<input type="text" placeholder="请输入用户名" id="name"></br>
<span id="sp1"></span></br></br>
密 码：<input type="password" placeholder="请输入密码" id="pwd"></br>
<span id="sp2"></span></br></br>
<input type="button" value="登 录" id="but">
</form>
</div>
</div>
</div>
<script>
$("#but").click(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
$("input").change(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
</script>
</body>
</html>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
