jQuery 开发登录教程之jquery验证

第一节我们讲到了使用jquery开发表单验证步骤，也就是流程图，页面的布局与css这俩块我们都已经完成了

接下来就是引入jquery的文件与编写jquery的代码了

注：如果你的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>

新建文件

<!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>

提交重置代码

自动运行

全屏