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传过来的值  去数据库里查询是否用户名已存在

        如果存在就给出相应的提示" * 该用户已被注册"

        如果数据库里没有允许注册 给相应的提示" *  √  "

posted @ 2018-12-26 20:38  王为龙  阅读(1815)  评论(0编辑  收藏  举报