实时验证用户名是否重复
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实时验证用户名是否重复相关的知识,希望对你有一定的参考价值。
现在很多网站在注册用户名时,你只要输入好要注册的用户名后,不用提交请求就可以实时的显示用户名是否可用,重复等。这总情况下不能刷新页面,而要把用户名提交到后台比对,后台把结果返回到前端,前端再显示出用户名是否可用。下面将使用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"); } }) });
实现思路:
首先是创建一个自运行函数
然后定义一个old_data,获取初始值,根据业务不同,这里不一定大家都需要,如果是注册,判断用户名是否存在就不需要,但如果是修改用户名,就需要,因为修改用户名的时候,首先需要获取到当前用户名
然后再通过JQuery获取id为id_ServerName的标签(通常为input标签),并监听一个change事件(当value发生更改时)执行一个函数
获取新的值(这个值是需要传入后台进行比对的数据)
判断新值是否等于老的值,如果等于就不进行任何操作,我这里是添加了一个类,这个类是用于将错误信息隐藏。如果不等于,就需要执行ajax将数据传入后台,然后后台进行比对
ajax指定了需要传入的url(这里分为本域请求和跨域请求,我这里是本域请求,如果是跨域自行百度解决)。指定数据传输类型为post,也可以指定为get。指定了传入的数据,数据为一个字典,key为自定义,value为获取到的新数据,后端接收到就为字典。seccess,定义了一个函数,这个函数用来处理请求成功后端返回的数据,这个数据用了一个参数去接收,参数名自定义,我这里为arg。Error,OK为后端处理好数据后返回的结果,前端根据返回结果做处理。fail也定义了一个函数,这个函数用来处理请求失败时的处理函数,比如超时或者其它
JQuery 表单验证
此方法可提交form表单内指定的数据到后台,此外表单功能对ajax做了一些封装,使其使用更简单,更方便,推荐使用,代码如下
首先需要加载JQuery表单验证的模块
<script src="/static/jquery.js"></script> <script src="/static/jquery.validate.min.js"></script> <script src="/static/messages_zh.js"></scrip
下面是JQuery代码块
$().ready(function() { $("#commentForm").validate({ rules: { EnvName: { required: true, remote: { url: "/am/check", type: "post" } } }, messages: { EnvName: { required: "请输入环境名称", remote: "此名称已经被使用" } } }); });
实现思路:
同样也是创建了一个自执行函数,调用了ready方法,此方法又调用了一个函数,至于为什么是ready方法,自行查找相关资料
找到form表单,这里通过id找到,然后监听一个validata事件
rules用来定义规则,EnvName为标签的name属性,通过为input标签,也就是需要验证的标签,如果有多个标签需要验证,那么就在对应的花括号后面加个逗号,然后换行写另外一个规则
required: true表示此标签为必填
remote表示调用ajax(重点),此方法url表示数据要上传的url,同样也存在本域请求或者跨域请求,type指定数据类型,data,指定要传输的数据,默认为本标签的value,也是以字典形式,其中key为标签的name,value为标签的value,另外这里只接收false返回值和true返回值,区别大小写,这里为小写,所以后端处理完数据后必须返回指定的字符串,否则无法处理
messages指定当规则里面判断出错需要提示的消息,比如这里EnvName标签里面,如果此标签没有写任何内容就会出现后面指定的提示,如果是远程调用返回false则出现后面指定的提示
关于JQuery表单验证更多信息参考:菜鸟教程
以上是关于实时验证用户名是否重复的主要内容,如果未能解决你的问题,请参考以下文章