用户注册
用户名: | *请输入8~16位用户名 |
密码: | *请输入8~12位密码 |
确认密码: | *再次输入密码 |
手机号: | *请输入手机号码 |
验证码: | *输入验证码 |
提交 |
有以上用户注册的代码
进行用户注册 主要有两大步 获取焦点的时候和失去焦点的时候
<style>.cur{border:solid 1px skyblue;}</style>
<script>
//获取焦点的时候
$(‘input[name=username]’).focus(function(){
$(this).addClass(‘cur’);
})
//失去焦点
$(‘input[name=username]’).blur(function(){
//获取用户输入的数据 并去除两边的字符
var uv = $(this).val().trim();
//如果用户没有输入数据给提示
if(uv == ”){
$(this).next().text(‘ *用户名不能为空’).css(‘color’,’#e53e41′);
$(this).css(‘border’,’solid 1px #e53e41′);
return;
}
//正则
var reg = /^\w{3,12}$/;
//ajax 里的this代表ajax那个函数 所以要定义一个变量
var tu = $(this);
//检测
if(!reg.test(uv)){
$(this).next().text(‘ *用户名格式不正确’).css(‘color’,’#e53e41′);
$(this).css(‘border’,’solid 1px #e53e41′);
}else{
//用户输入的符合规则
//发送ajax
$.post(‘/home/checkuser’,{uname:uv},function(data){
//判断
if(data == ‘1’){
tu.next().text(‘ *用户名已存在’).css(‘color’,’#e53e41′);
tu.css(‘border’,’solid 1px #e53e41′);
}else{
tu.next().text(‘ *√’).css(‘color’,’green’);
tu.css(‘border’,’solid 1px green’)
}
})
}
})
</script>
总结思路
js进行用户注册 主要有两大步 获取焦点的时候和失去焦点的时候
1.获取焦点的时候 —-给对应的input表单添加样式
2.失去焦点的时候
-1.获取input 表单里用户输入的值 if 如果为空给用户相应的提示 ” * 用户名不能为空 “
-2.写一个正则 获取的值和正则比对如果不符合给出相应的提示 ” * 用户名格式不符合 “
-3.如果符合 发送ajax在逻辑代码里获取ajax传过来的值 去数据库里查询是否用户名已存在
如果存在就给出相应的提示” * 该用户已被注册”
如果数据库里没有允许注册 给相应的提示” * √ “
转载于:https://www.cnblogs.com/wwlong/p/10181643.html