집 > 기사 > 백엔드 개발 > 정규식을 사용하여 로그인 페이지 입력 유효성 검사

정규식을 사용하여 로그인 페이지 입력 유효성 검사

巴扎黑원래의: 2017-09-21 11:26:362092검색

이 글에서는 로그인 페이지의 입력이 요구 사항을 충족하는지 확인하기 위해 정규 표현식을 사용하는 예제 코드를 주로 소개합니다. 매우 훌륭하고 참고할 만한 가치가 있습니다. 도움이 필요한 친구들은 참고할 수 있습니다.

먼저 렌더링을 보여드리겠습니다. :

더 이상 헛소리하지 마세요. 구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <script src="js/jquery-1.8.0.min.js"></script>
 <script>
 $(function() {
  $("input[name=&#39;uname&#39;]").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 = &#39;uname&#39;]").focus(function() { //获取焦点
  $(this).val("");
  $(this).parent().next().html("");
  });
  $("input[name=&#39;pwd&#39;]").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=&#39;pwd&#39;]").focus(function() {
  $(this).parent().next().html("");
  });
  $("input[name=&#39;birthday&#39;]").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=&#39;birthday&#39;]").focus(function() {
  $(this).parent().next().html("");
  });
  $("input[name=&#39;email&#39;]").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=&#39;email&#39;]").focus(function(){
  $(this).parent().next().html("");
  });
 });
 </script>
 <style>
 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;
 }
 </style>
 <body>
 <p id="home">
  <p id="head">
  <form action="" method="post">
   <dl class="dl1">
   <dt>用户名 : </dt>
   <dd class="dd1"><input type="text" value="输入用户名" name="uname" /></dd>
   <dd></dd>
   </dl>
   <dl class="dl1">
   <dt>用户密码 : </dt>
   <dd class="dd1"><input type="password" name="pwd" /></dd>
   <dd></dd>
   </dl>
   <dl class="dl1">
   <dt>出生日期 : </dt>
   <dd class="dd1"><input type="text" name="birthday" /></dd>
   <dd>yyyy-mm-dd</dd>
   </dl>
   <dl class="dl1">
   <dt>用户邮箱 : </dt>
   <dd><input type="text" name="email"/></dd>
   <dd></dd>
   </dl>
  </form>
  </p>
  <p id="foot">
  <input type="submit" value="" id="btn_sub" />
  <input type="reset" value="" id="btn_res" />
  </p>
 </p>
 </body>
</html>

위 내용은 정규식을 사용하여 로그인 페이지 입력 유효성 검사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：PHP에서 jQuery+Ajax를 사용하여 페이징 쿼리 기능 구현다음 기사：PHP에서 jQuery+Ajax를 사용하여 페이징 쿼리 기능 구현