【JQuery实例】---用户名验证

最新推荐文章于 2021-05-14 17:07:29 发布

EricaLSR

最新推荐文章于 2021-05-14 17:07:29 发布

阅读量1.1k

点赞数

分类专栏： ------JavaScript

本文链接：https://blog.csdn.net/lishaoran369/article/details/49759257

版权

------JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在软考之前，自己已经敲过一遍这6个例子，感觉非常经典，就写在博客上当做一个笔记吧！没事的时候看看，或者说是为了在做项目的时候遇到这些类似的问题自己一查就可以找到，节省了查阅时间！

（接下来的几篇博客都是一些简单的引用JQuery的js代码实例，敬请期待！）

首先，简单界面是这样的：

它的实现代码由三大部分组成，html,css,javascript。还要额外的引用一个已经封装好的jquery.js文件。

HTML代码为：

<span style="font-size:18px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>JQuery实战1-用户名校验</title>
    <link href="userVerify.css" rel="stylesheet" />
    <script src="jquery.js"></script>
    <script src="userVerify.js"></script>
</head>
<body>
    请输入用户名：<input id="userName" type="text" class="userText"/><input id="verifyButton" type="button" value="校验" />
    <div id="result"></div>
</body>
</html></span>

css代码为：

<span style="font-size:18px;">body {
}

.userText{
    /*控制文本框的红色边框为红色*/
    border:1px solid red;
    /*添加波浪线图片*/
    background-image :url(userVerify.gif);
    /*设置波浪线在水平重复显示*/
    background-repeat :repeat-x ;
    /*设置图片在文本框底部*/
    background-position :bottom ;
     
}</span>

.js代码为：

<span style="font-size:18px;">/*需要做的两件事
1、button被按下的时候，要将文本框中的数据获取到，发给服务端，最后
接受服务器返回数据，填充到预留的div中，就可以看到结果
2、文本框上，用户按键之后，需要判断文本框汇总的额内容是否为空，如果不为空，红色边框就取消，否则保留
需要在页面装载完成是注册上这些工作！
*/

$(document).ready(function(){
//这里面的内容就是页面装载完成后需要执行的代码
//$是JS允许的一个方法名,都是在$参数上面添加方法名进行操作的
    //需要找到button按钮，注册事件
    $("#verifyButton").click(function () {
        var userNameNode = $("#userName");//做一个缓存
        //获取文本框的内容
        var userName = userNameNode.val();
        //将这个内容发送到服务器端
        if (userName == "") {
            alert("用户名不能为空！");
        } else {
            $.get("http://127.0.0.1:8080/JQuery/userVerify?userName=" + encodeURI(encodeURI(userName)), null, function (response) {
                //接受服务器返回的数据，填充到div中
                $("#result").html(response);
            });
        }
       
    });
    var userNameNode = $("#userName");
    //需要找到文本框，注册事件
    userNameNode.keyup(function () {
        //获取当前文本框中的内容
        var value = userNameNode.val();
        if (value == ""){
            //让边框变成红色，并且带背景图
            userNameNode.addClass("userText");
        }else{
            //去掉边框和背景图
            userNameNode.removeClass("userText");
        }
    });
})
</span>

小总：

在js代码中，需要注意的是$符的运用，还有就是document对象的应用，这些都是学习js的基础！至于咱们引用的JQuery.js文件其实就是一套夸浏览器的JavaScript库，简化HTML与JavaScript之间的操作！主要运用它的.val、.html等各种方法来控制HTML元素的！

具体关于JQuery的了解，在网上可以查到很多的资料，咱们主要是运用它来学习JavaScript的，可以给大家提供一个了解的网址：http://www.cnblogs.com/FoundationSoft/archive/2010/04/21/1717329.html