jQuery 开发登录教程之jquery验证
第一节我们讲到了使用jquery开发表单验证步骤，也就是流程图，页面的布局与css这俩块我们都已经完成了
接下来就是引入jquery的文件与编写jquery的代码了
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
注：如果你的jquery.js文件与form.html的文件不在同一个目录下，需要注意写正确的路径
面我们来看一下，我们需要验证表单的用户名和密码
如果没有填写，然后我们就点登陆了，这样是错误的，所以我们给出一个提示信息
<script>
$("#but").click(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
</script>大家看如上代码，我们获得用户名的文本框的内容，如果是空，我们将在第一个span 标签中加入提示文字，如果不为空，则span 内容是没有内容的
当我们没有输入内容点击按钮登录了，然后span 标签也是会有提示信息，当我在文本框中输入内容，输入完成后，点击页面其他地方，span 标签的提示文字将会没有
这时我们就触发了一个改变事件，代码如下：
<script>
$("input").change(function(){
if($("#name").val()==""){
$("#sp1").html("请输入用户名");
}else{
$("#sp1").html("");
}
if($("#pwd").val()==""){
$("#sp2").html("请输入密码");
}else{
$("#sp2").html("");
}
})
</script>到此，我们一个登录页面的简单验证就完成了
下面我把完整代码贴出来
<!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>
neue Datei
<!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>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)