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("請(qǐng)輸入用戶名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("請(qǐng)輸入密碼");
}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("請(qǐng)輸入用戶名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("請(qǐng)輸入密碼");
}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>登錄頁(yè)面的驗(yàn)證</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="請(qǐng)輸入用戶名" id="name"></br>
<span id="sp1"></span></br></br>
密 碼：<input type="password" placeholder="請(qǐng)輸入密碼" 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("請(qǐng)輸入用戶名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("請(qǐng)輸入密碼");
}else{
$("#sp2").html("");
}
})
$("input").change(function(){
if($("#name").val()==""){
$("#sp1").html("請(qǐng)輸入用戶名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("請(qǐng)輸入密碼");
}else{
$("#sp2").html("");
}
})
</script>
</body>
</html>
