实时验证用户名是否重复

    现在很多网站在注册用户名时，你只要输入好要注册的用户名后，不用提交请求就可以实时的显示用户名是否可用，重复等。这总情况下不能刷新页面，而要把用户名提交到后台比对，后台把结果返回到前端，前端再显示出用户名是否可用。下面将使用JQuery的ajax方法，和JQuery的表单功能来实现我们的需求

JQuery ajax方法

此方法可以提交任何地方的数据到后台，实现代码如下

在这之前需要加载JQuery的js

$(function () {    var old_data = $("#id_ServerName").val();    $("#id_ServerName").change(function () {        var data = $("#id_ServerName").val();        if (data !== old_data){            $.ajax({                url: "/am/check",                type: "post",                data: {"host_name": data},                success: function (arg) {                    if (arg === "Error"){                        $("#id_error_info").removeClass("error_info");                    }else if (arg === "OK") {                        $("#id_error_info").addClass("error_info");                    }else{                        console.log("OK");                    }                },                fail: function () {                }            })        }else {            $("#id_error_info").addClass("error_info");        }    })});

实现思路：

1. 首先是创建一个自运行函数

2. 然后定义一个old_data，获取初始值，根据业务不同，这里不一定大家都需要，如果是注册，判断用户名是否存在就不需要，但如果是修改用户名，就需要，因为修改用户名的时候，首先需要获取到当前用户名

3. 然后再通过JQuery获取id为id_ServerName的标签(通常为input标签)，并监听一个change事件（当value发生更改时）执行一个函数

4. 获取新的值（这个值是需要传入后台进行比对的数据）

5. 判断新值是否等于老的值，如果等于就不进行任何操作，我这里是添加了一个类，这个类是用于将错误信息隐藏。如果不等于，就需要执行ajax将数据传入后台，然后后台进行比对

6. ajax指定了需要传入的url（这里分为本域请求和跨域请求，我这里是本域请求，如果是跨域自行百度解决）。指定数据传输类型为post，也可以指定为get。指定了传入的数据，数据为一个字典，key为自定义，value为获取到的新数据，后端接收到就为字典。seccess，定义了一个函数，这个函数用来处理请求成功后端返回的数据，这个数据用了一个参数去接收，参数名自定义，我这里为arg。Error,OK为后端处理好数据后返回的结果，前端根据返回结果做处理。fail也定义了一个函数，这个函数用来处理请求失败时的处理函数，比如超时或者其它
   

JQuery 表单验证

此方法可提交form表单内指定的数据到后台，此外表单功能对ajax做了一些封装，使其使用更简单，更方便，推荐使用，代码如下

首先需要加载JQuery表单验证的模块

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/static/jquery.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/static/jquery.validate.min.js"></script><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/static/messages_zh.js"></scrip

下面是JQuery代码块

$().ready(function() {    $("#commentForm").validate({        rules: {            EnvName: {                required: true,                remote: {                    url: "/am/check",                    type: "post"                }            }        },        messages: {            EnvName: {                required: "请输入环境名称",                remote: "此名称已经被使用"            }        }    });});

实现思路：

1. 同样也是创建了一个自执行函数，调用了ready方法，此方法又调用了一个函数，至于为什么是ready方法，自行查找相关资料

2. 找到form表单，这里通过id找到，然后监听一个validata事件

3. rules用来定义规则，EnvName为标签的name属性，通过为input标签，也就是需要验证的标签，如果有多个标签需要验证，那么就在对应的花括号后面加个逗号，然后换行写另外一个规则

4. required: true表示此标签为必填

5. remote表示调用ajax（重点），此方法url表示数据要上传的url，同样也存在本域请求或者跨域请求，type指定数据类型，data，指定要传输的数据，默认为本标签的value，也是以字典形式，其中key为标签的name，value为标签的value，另外这里只接收false返回值和true返回值，区别大小写，这里为小写，所以后端处理完数据后必须返回指定的字符串，否则无法处理

6. messages指定当规则里面判断出错需要提示的消息，比如这里EnvName标签里面，如果此标签没有写任何内容就会出现后面指定的提示，如果是远程调用返回false则出现后面指定的提示

关于JQuery表单验证更多信息参考：菜鸟教程