Maison > interface Web > js tutoriel > le corps du texte

Utilisez des expressions régulières pour vérifier si l'entrée sur la page de connexion répond à l'expression Requirements_regular

韦小宝
Libérer: 2018-05-25 14:57:10
original
2791 Les gens l'ont consulté

Cet article présente principalement l'exemple de code qui utilise des expressions régulières pour vérifier si l'entrée sur la page de connexion répond aux exigences. Dans le processus de développement actuel, les expressions régulières jouent un rôle très important et les expressions régulières. sont également relativement difficiles à comprendre. Les amis dans le besoin peuvent se référer à

Dans un premier temps, je vais vous montrer les rendus :

Sans plus attendre, je vous posterai directement le code, le code spécifique. Comme indiqué ci-dessous :

<!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>
Copier après la connexion

Résumé

Ce qui précède est l'introduction de l'éditeur à l'utilisation d'expressions régulières pour vérifier la page de connexion. contribution Qu'il réponde aux exigences, j'espère que cela sera utile à tout le monde ! !

Recommandations associées :

Expression régulière Utilisation du modèle de correspondance le plus court dans la formule

Organisation des notes de vérification du registre d'expressions régulières

L'expression régulière PHP la plus complète en history_regular expression

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal