主頁 > 知識(shí)庫 > 使用正則表達(dá)式驗(yàn)證登錄頁面輸入是否符合要求

使用正則表達(dá)式驗(yàn)證登錄頁面輸入是否符合要求

熱門標(biāo)簽:西藏智能外呼系統(tǒng)代理商 呼叫系統(tǒng)外呼只能兩次 ai電話機(jī)器人搭建 地圖標(biāo)注教學(xué)點(diǎn) 梅縣地圖標(biāo)注 外呼系統(tǒng)無呼出路由是什么原因 貴港公司如何申請(qǐng)400電話 400電話辦理電話辦理 甘肅醫(yī)療外呼系統(tǒng)排名

先給大家展示下效果圖:

廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:

!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='uname']").blur(function() { //失去焦點(diǎn)
  var namestr = $(this).val();
  var regstr = /^[\u4e00-\u9fa5]{2,4}$/;
  if(!regstr.test(namestr)) {
   $(this).parent().next().html("用戶名必須是2-4個(gè)漢字").css("color", "red");
   return false;
  }
  return true;
  }); 
  $("input[name = 'uname']").focus(function() { //獲取焦點(diǎn)
  $(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位數(shù)字字母下劃線").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("");
  });
 });
 /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>
 div id="home">
  div 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>
  /div>
  div id="foot">
  input type="submit" value="" id="btn_sub" />
  input type="reset" value="" id="btn_res" />
  /div>
 /div>
 /body>
/html>

總結(jié)

以上所述是小編給大家介紹的使用正則表達(dá)式驗(yàn)證登錄頁面輸入是否符合要求,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

您可能感興趣的文章:
  • 利用jquery正則表達(dá)式在頁面驗(yàn)證url網(wǎng)址輸入是否正確
  • 正則表達(dá)式進(jìn)行頁面表單驗(yàn)證功能
  • js正則表達(dá)式注冊(cè)頁面表單驗(yàn)證
  • Java使用正則表達(dá)式對(duì)注冊(cè)頁面進(jìn)行驗(yàn)證功能實(shí)現(xiàn)
  • Python正則表達(dá)式匹配HTML頁面編碼
  • 動(dòng)態(tài)向頁面添加控件和使用正則表達(dá)式的代碼

標(biāo)簽:本溪 泰安 涼山 湖州 大興安嶺 常州 哈密 巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《使用正則表達(dá)式驗(yàn)證登錄頁面輸入是否符合要求》,本文關(guān)鍵詞  使用,正則,表達(dá)式,驗(yàn)證,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。

  • 相關(guān)文章
  • 下面列出與本文章《使用正則表達(dá)式驗(yàn)證登錄頁面輸入是否符合要求》相關(guān)的同類信息!
  • 本頁收集關(guān)于使用正則表達(dá)式驗(yàn)證登錄頁面輸入是否符合要求的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章