这样的效果
我给你说说原理吧,当你输入用户名是 通过js获取的用户名(获取的条件可以是鼠标离开事件)。之后在js中通过ajax提交给 thinkphp中的控制器,在控制器中接收。 之后在控制器中读取数据库中的用户表信息中的用户名。 再判断ajax提交过来的和数据库中的用户名最对比看看是否已经存在。 若存在则返回0,若不存在返回1. 之后前台通过返回的值,再在用户名后面添加一个a标签或者p标签显示,当然显示样式可以自定义。 其实也不要想复杂了,就这个原理。 最多就是用ajax把值传过去,和获取到传回来的值,之后做出相应的动作。追问
在public目录下写好的jq注册验证,在html调用不能实现验证,
var username=$(this).val();
$.get('__URL__/check',{'username':username},function(data){
if(data==1){
$('#tip1').html("用户名被注册");
}else{
$('#tip1').html("用户名可用");
}
你没有说清楚是哪里不能验证 我也不好判断。一步一步来判断吧,你首先看看你的jq引进来了没有。其次,你看看是否获取到val值。
追问val可以得到,就是ajax哪里出现问题,打印data的时候出现
文件夹目录
应该是你的action的问题,那边报错了。
追问我把js代码写到html里可以成功验证,action应该没错吧
追答哦 是你的URL模板变量没有解析出来 是不是你没通过action访问的页面啊?
温馨提示:答案为网友推荐,仅供参考
第1个回答 2013-12-04
用ajax搞下就行了,你写个onblur时间,然后在里面写ajax验证就行了
function check(){
var nick = jQuery('#nickname').val();
定义个ID获取到value值;
var oldnick = jQuery('#oldnick').val();
var number=nick.replace(/[^\x00-\xff]/g, "**").length;
if(nick=="")
{
jQuery(".nick_empty").css('display', 'block');
jQuery(".nick_error").css('display', 'none');
jQuery(".nick_err").css('display', 'none');
jQuery(".nick_succ").css('display', 'none');
return false;
}else if(number<4 || number>16){
jQuery(".nick_empty").css('display', 'none');
jQuery(".nick_error").css('display', 'block');
jQuery(".nick_err").css('display', 'none');
jQuery(".nick_succ").css('display', 'none');
return false;
}else if(!/^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[\w])*$/.test(nick)){
jQuery(".nick_empty").css('display', 'none');
jQuery(".nick_error").css('display', 'block');
jQuery(".nick_err").css('display', 'none');
jQuery(".nick_succ").css('display', 'none');
return false;
}else{
if(nick==oldnick){
jQuery(".nick_empty").css('display', 'none');
jQuery(".nick_error").css('display', 'none');
jQuery(".nick_err").css('display', 'none');
jQuery(".nick_succ").css('display', 'block');
return true;
}else{
jQuery.ajax({
async:false,
url:'../UserCenter/checknickname',
data:'nick='+nick,
type:'post',
success:function(e){
data=e;
}
});
if(data=='no'){
jQuery(".nick_empty").css('display', 'none');
jQuery(".nick_error").css('display', 'none');
jQuery(".nick_err").css('display', 'none');
jQuery(".nick_succ").css('display', 'block');
return true;
}else{
jQuery(".nick_empty").css('display', 'none');
jQuery(".nick_error").css('display', 'none');
jQuery(".nick_err").css('display', 'block');
jQuery(".nick_succ").css('display', 'none');
return false;
}
}
}
}本回答被网友采纳
function check(){
var nick = jQuery('#nickname').val();
定义个ID获取到value值;
var oldnick = jQuery('#oldnick').val();
var number=nick.replace(/[^\x00-\xff]/g, "**").length;
if(nick=="")
{
jQuery(".nick_empty").css('display', 'block');
jQuery(".nick_error").css('display', 'none');
jQuery(".nick_err").css('display', 'none');
jQuery(".nick_succ").css('display', 'none');
return false;
}else if(number<4 || number>16){
jQuery(".nick_empty").css('display', 'none');
jQuery(".nick_error").css('display', 'block');
jQuery(".nick_err").css('display', 'none');
jQuery(".nick_succ").css('display', 'none');
return false;
}else if(!/^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[\w])*$/.test(nick)){
jQuery(".nick_empty").css('display', 'none');
jQuery(".nick_error").css('display', 'block');
jQuery(".nick_err").css('display', 'none');
jQuery(".nick_succ").css('display', 'none');
return false;
}else{
if(nick==oldnick){
jQuery(".nick_empty").css('display', 'none');
jQuery(".nick_error").css('display', 'none');
jQuery(".nick_err").css('display', 'none');
jQuery(".nick_succ").css('display', 'block');
return true;
}else{
jQuery.ajax({
async:false,
url:'../UserCenter/checknickname',
data:'nick='+nick,
type:'post',
success:function(e){
data=e;
}
});
if(data=='no'){
jQuery(".nick_empty").css('display', 'none');
jQuery(".nick_error").css('display', 'none');
jQuery(".nick_err").css('display', 'none');
jQuery(".nick_succ").css('display', 'block');
return true;
}else{
jQuery(".nick_empty").css('display', 'none');
jQuery(".nick_error").css('display', 'none');
jQuery(".nick_err").css('display', 'block');
jQuery(".nick_succ").css('display', 'none');
return false;
}
}
}
}本回答被网友采纳
第2个回答 2013-12-06
用js的ajax传值,然后返回值显示在指定的位置。实现