简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Backend-Entwicklung  >  Validieren Sie die Eingabe auf der Anmeldeseite mithilfe regulärer Ausdrücke

Validieren Sie die Eingabe auf der Anmeldeseite mithilfe regulärer Ausdrücke

巴扎黑
巴扎黑Original
2017-09-21 11:26:362022Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode vorgestellt, der mithilfe regulärer Ausdrücke überprüft, ob die Eingabe auf der Anmeldeseite den Anforderungen entspricht. Er ist sehr gut und hat Referenzwert.

Lassen Sie mich Ihnen zuerst den Effekt zeigen:

Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen: 


<!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>

Das obige ist der detaillierte Inhalt vonValidieren Sie die Eingabe auf der Anmeldeseite mithilfe regulärer Ausdrücke. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwendung von jQuery+Ajax in PHP zur Implementierung der Paging-AbfragefunktionNächster Artikel：Verwendung von jQuery+Ajax in PHP zur Implementierung der Paging-Abfragefunktion

In Verbindung stehende Artikel

Mehr sehen