这次给大家带来用正则表达式验证登录页面的输入内容js正则表达式视频教程，用正则表达式验证登录页面输入内容的注意事项有哪些，下面就是实战案例，一起来看一下。

  先给大家展示下效果图：

  废话不多说了js正则表达式视频教程，直接给大家贴代码了，具体代码如下所示：

$(function() {
  $("input[name='uname']").blur(function() { //失去焦点
  var namestr = $(this).val();
  var regstr = /^[\u4e00-\u9fa5]{2,4}$/;
  if(!regstr.test(namestr)) {
   $(this).parent().next().html("用户名必须是2-4个汉字").css("color", "red");
   return false;
  }
  return true;
  }); 
  $("input[name = 'uname']").focus(function() { //获取焦点
  $(this).val("");
  $(this).parent().next().html("");
  });
  $("input[name='pwd']").blur(function() {
  var pwdstr = $(this).val();
  var regstr = /^\w{6}$/;
  if(!regstr.test(pwdstr)) {
   $(this).parent().next().html("密码必须是6位数字字母下划线").css("color", "red");
   return false;
  }
  return true;
  });
  $("input[name='pwd']").focus(function() {
  $(this).parent().next().html("");
  });
  $("input[name='birthday']").blur(function() {
  var birthdaystr = $(this).val();
  var regstr = /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(3[0-1]|2[0-9]|0?[1-9])$/;
  if(!regstr.test(birthdaystr)) {
   $(this).parent().next().html("日期格式不正确").css("color", "red");
   return false;
  }
  return true;
  });
  $("input[name='birthday']").focus(function() {
  $(this).parent().next().html("");
  });
  $("input[name='email']").blur(function(){
  var emailstr = $(this).val();
  var regstr = /^[\w-]+@[a-z0-9A-Z]+(.[a-zA-Z]{2,3}){1,2}$/;
  if(!regstr.test(emailstr)){
   $(this).parent().next().html("邮箱格式不正确").css("color","red");
   return false;
  }
  return true;
  });
  $("input[name='email']").focus(function(){
  $(this).parent().next().html("");
  });
 });
body {
  font-size: 12px;
 }
 #home {
  background-color: beige;
  border: solid 1px black;
  width: 550px;
  height: 185px;
  margin: auto;
  margin-top: 20px;
 }
 #head {
  height: 135px;
 }
 #foot {
  text-align: center;
 }
 .dl1 {
  clear: both;
  padding-left: 10px;
 }
 .dl1 dt {
  float: left;
  height: 30px;
  width: 80px;
  line-height: 30px;
 }
 .dl1 dd {
  float: left;
  height: 30px;
  line-height: 30px;
  /width: 250px;/
 }
 #btn_res {
  background-image: url(img/reset.gif);
  width: 80px;
  height: 34px;
 }
 #btn_sub {
  background-image: url(img/submit.gif);
  width: 80px;
  height: 34px;
 }

  

  
   
   用户名 : 
   
   
   
   
   用户密码 : 
   
   
   
   
   出生日期 : 
   
   yyyy-mm-dd
   
   
   用户邮箱 : 
   
   
   
  
  

    
  
  
  

 

  相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！