input 表单的验证

　　用户注册

用户名:	*请输入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