溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

JavaWeb表單及時(shí)驗(yàn)證功能在輸入后立即驗(yàn)證(含用戶(hù)類(lèi)型,性別,愛(ài)好...的驗(yàn)證)

發(fā)布時(shí)間：2020-10-08 04:15:08 來(lái)源：腳本之家 閱讀：201 作者：水山奇 欄目：web開(kāi)發(fā)

問(wèn)題：表單怎么在輸入后立即驗(yàn)證，而不是提交后再驗(yàn)證那么不方便（網(wǎng)上搜到的要么是模棱兩可，要么是殘缺不全…）

方法：鑒于此，加上我個(gè)人的理解（注釋?zhuān)┰谏厦妗?/p>

截圖：

JavaWeb表單及時(shí)驗(yàn)證功能在輸入后立即驗(yàn)證(含用戶(hù)類(lèi)型,性別,愛(ài)好...的驗(yàn)證)

代碼：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用戶(hù)注冊(cè)</title>
<!-- 此處引用外部css樣式 -->
<link rel="stylesheet" href="css/style.css" rel="external nofollow" />
  <script type="text/javascript">
  //及時(shí)驗(yàn)證用戶(hù)名
  function checkuse(){
     //在每個(gè)函數(shù)中定義check變量是為了在表單提交后，能夠逐個(gè)驗(yàn)證每個(gè)函數(shù)是否通過(guò)，很好很好。（以下同理）
     var check; 
     var username = document.getElementById("username").value; 
     if (username.length > 18 || username.length < 6) { 
       alert("用戶(hù)名輸入不合法，請(qǐng)重新輸入！");
       //此處甚妙，既然你在此處輸入錯(cuò)誤，那么按理說(shuō)當(dāng)然要在此處繼續(xù)輸入了。（在此處繼續(xù)獲取焦點(diǎn)?。?       document.getElementById("username").focus();
       check = false; 
      } else { 
       document.getElementById("checktext1").innerHTML = "* 用戶(hù)名由6-18位字符組成 √"; 
       check = true; 
      } 
      return check; 
    } 
  //利用正則表達(dá)式判斷密碼符合否
  function checkpwd() { 
    var check; 
    var reg = /[^A-Za-z0-9_]+/;
    var regs = /^[a-zA-Z0-9_\u4e00-\u9fa5] + $ /;
    var password = document.getElementById("password").value; 
    if (password.length < 6 || password.length > 18 || regs.test(password)) { 
      alert("密碼輸入不合法，請(qǐng)重新輸入！");
      document.getElementById("password").focus();
      check = false; 
    } else { 
      document.getElementById("checktext2").innerHTML = "* 密碼由6-18位字符組成，且必須包含字母、數(shù)字和標(biāo)點(diǎn)符號(hào) √"; 
      check = true; 
    } 
    return check; 
  } 
  //驗(yàn)證密碼是否不一致！
  function checkpwdc() { 
    var check; 
    var password = document.getElementById("password").value; 
    var pwdc = document.getElementById("pwdc").value; 
    if (password != pwdc) { 
      alert("兩次輸入密碼不一致，請(qǐng)重新輸入！");
      document.getElementById("pwdc").focus();
      check = false; 
    } else { 
      document.getElementById("checktext3").innerHTML = "* 請(qǐng)?jiān)俅屋斎肽愕拿艽a √"; 
      check = true; 
    } 
    return check; 
  }
  //提交時(shí)驗(yàn)證用戶(hù)類(lèi)別
  function checkut(){
    var check; 
    if(document.getElementById("selUser").selectedIndex == 0)
      {
        alert("請(qǐng)選擇用戶(hù)類(lèi)型！");
        document.getElementById("selUser").focus();
        check = false; 
      }else{
        document.getElementById("checktext4").innerHTML = "* 請(qǐng)選擇用戶(hù)類(lèi)型 √"; 
        check = true; 
      }
    return check;  
  }
  //提交時(shí)驗(yàn)證用戶(hù)性別
  function checkGender(){
    var check; 
    var gender = "";
    //獲取所有名稱(chēng)為sex的標(biāo)簽
    var sex = document.getElementsByName("sex");
    //遍歷這些名稱(chēng)為sex的標(biāo)簽
    for(var i=0;i<sex.length;++i){
      //如果某個(gè)sex被選中，則記錄
      if(sex[i].checked)
        gender = sex[i].value;   
    }
    if(gender == "")
      {
        alert("請(qǐng)選擇性別！");
        check = false;
      }else{
        document.getElementById("checktext5").innerHTML = "* 請(qǐng)選擇你的性別 √"; 
        check = true; 
      }  
    return check;
  }
  //及時(shí)驗(yàn)證出生日期
  function checkDate(){
    var check; 
    if(document.getElementById("txtDate").value ==""){
       alert("請(qǐng)?zhí)顚?xiě)出生日期！");
       document.getElementById("txtDate").focus();
       check = false;
      }else{
        document.getElementById("checktext6").innerHTML = "* 請(qǐng)選擇你的出生日期 √"; 
        check = true;
      }
    return check;
  }
  //及時(shí)驗(yàn)證興趣愛(ài)好
  function checkHobby(){
    var check; 
    var hobby = 0;
    //objNum為所有名稱(chēng)為hobby的input標(biāo)簽
    var objNum = document.getElementsByName("hobby");
    //遍歷所有hobby標(biāo)簽
    for(var i=0;i<objNum.length;++i){
      //判斷某個(gè)hobby標(biāo)簽是否被選中
      if(objNum[i].checked==true)
        hobby++;
    }  
    //如果有選中的hobby標(biāo)簽
    if(hobby >=1){
      document.getElementById("checktext7").innerHTML = "* 請(qǐng)選擇你的興趣愛(ài)好 √";     
      check = true;
    }else{
      alert("請(qǐng)?zhí)顚?xiě)愛(ài)好！");
      check = false;
    }
    return check;  
  }
  //正則表達(dá)式驗(yàn)證電子郵件（及時(shí)）
  function checkemail(){
    var check; 
    //電子郵件的正則表達(dá)式
    var e1 = document.getElementById("email").value.indexOf("@",0);
    var e2 = document.getElementById("email").value.indexOf(".",0);
    if(email == "" || (e1==-1 || e2==-1) || e2<e1 )
    {
      alert("E_mail輸入錯(cuò)誤!");
      document.getElementById("email").focus();
      check = false;
    } else { 
      document.getElementById("checktext8").innerHTML = "* 請(qǐng)?zhí)顚?xiě)常用的EMAIL，將用于密碼找回 √"; 
      check = true; 
    } 
    return check; 
  } 
  //及時(shí)驗(yàn)證自我介紹
  function checkintro(){
    var check;  
    var intro = document.getElementById("introduction").value; 
    if (intro.length > 100) { 
     alert("字?jǐn)?shù)超限！"); 
     check = false; 
    } else { 
     document.getElementById("checktext9").innerHTML = "* 限100字內(nèi) √";
     document.getElementById("checktext9").focus();
     check = true; 
    } 
    return check; 
  } 
  //提交表單時(shí)所有都驗(yàn)證一遍(若任何一個(gè)驗(yàn)證不通過(guò)，則返回為false，阻止表單提交)
  function check() { 
    var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby()
     && checkemail() &&checkintro(); 
    return check;  
  } 
  </script>
</head>
<body >
<!-- <form action ="跳轉(zhuǎn)頁(yè)面" method ="get"|"post" name ="表單名稱(chēng)" target ="打開(kāi)方式" enctype="multipart/form-data" > -->
<!-- onsubmit()函數(shù)在返回值為true時(shí)提交表單。 -->
<form action="#" method="get" onsubmit="return check()" >
<fieldset>
<legend>
 表單及時(shí)驗(yàn)證小例子
</legend>
<table align="left"  >
  <tr>
   <td>用戶(hù)名:</td>
   <td><input type="text" name="username" id="username" onchange=" checkuse()" /></td>
   <td id="checktext1">* 用戶(hù)名由6-18位字符組成</td>
  </tr>
  <!-- onblur 事件處理程序:當(dāng)元素或窗口失去焦點(diǎn)時(shí)觸發(fā)該事件 -->
  <!-- onchange事件處理程序:當(dāng)表單元素獲取焦點(diǎn)，并且內(nèi)容發(fā)生改變時(shí)，觸發(fā)該事件 -->
  <!-- 以下同理 -->
  <tr>
   <td>密碼:</td>
   <td><input type="password" name="password" id="password" onchange="checkpwd()" /></td>
   <td id="checktext2">* 密碼由6-18位字符組成，且必須包含字母、數(shù)字和標(biāo)點(diǎn)符號(hào)</td>
  </tr>
  <tr>
   <td>確認(rèn)密碼：</td>
   <td><input type="password" name="pwdc" id="pwdc" onchange="checkpwdc()" /></td>
   <td id="checktext3">* 請(qǐng)?jiān)俅屋斎肽愕拿艽a</td>
  </tr>
  <tr>
   <td>用戶(hù)類(lèi)型：</td>
   <td>
     <select id="selUser" onblur="checkut()">
       <option name="selUser" value="0">請(qǐng)選擇</option>
       <option name="selUser" value="1">管理員</option>
       <option name="selUser" value="2">普通用戶(hù)</option>   
     </select>
   </td>
   <td id="checktext4">* 請(qǐng)選擇用戶(hù)類(lèi)型</td>
  </tr>
  <tr>
   <td>性別：</td>
   <td>
     <input type="radio" value="1" name="sex" onchange="checkGender()"/>男
     <input type="radio" value="2" name="sex" onchange="checkGender()"/>女
   </td>
   <td id="checktext5">* 請(qǐng)選擇你的性別</td>
  </tr>
  <tr>
   <td>出生日期：</td>
   <td><input type="date" name="date" id="txtDate" onblur="checkDate()"/></td>
   <td id="checktext6">* 請(qǐng)選擇你的出生日期</td>
  </tr>
  <tr>
   <td>興趣愛(ài)好：</td>
   <td>
     <input type="checkbox" name="hobby" value="reading" onchange="checkHobby()">閱讀
     <input type="checkbox" name="hobby" value="music" onchange="checkHobby()">音樂(lè)
     <input type="checkbox" name="hobby" value="sports" onchange="checkHobby()">運(yùn)動(dòng)
   </td>
   <td id="checktext7">* 請(qǐng)選擇你的興趣愛(ài)好</td>
  </tr>
  <tr>
   <td>電子郵件：</td>
   <td><input type="text" name="email" id="email" onchange="checkemail()"/></td>
   <td id="checktext8">* 請(qǐng)?zhí)顚?xiě)常用的EMAIL，將用于密碼找回</td>
  </tr>
  <tr>
   <td>自我介紹：</td>
   <td><textarea cols="30" rows="3" name="introduction" id="introduction" onchange="checkintro()">這是自我介紹...</textarea></td>
   <td id="checktext9">* 限100字內(nèi)</td>
  </tr>
  <tr>
   <td colspan="2" align="center">
     <input type="submit" name="submit" value="提交" />
     <input type="reset" name="reset" value="重置" />
   </td>
  </tr>
</table>
</fieldset>
</form>
</body>
</html>

CSS樣式：

 input:focus,textarea:focus{
    border:1px solid #f00;
    background:#fcc;
  }
  textarea{
    width:230px;
    height:50px;
  }
  body
  {
    font-size:15px;
    /* 字體的樣式 */
    font-family:Microsoft YaHei;  
  }
  select option{
    font-size:10px;
    font-family:Microsoft YaHei;
  }

以上所述是小編給大家介紹的JavaWeb表單及時(shí)驗(yàn)證功能在輸入后立即驗(yàn)證(含用戶(hù)類(lèi)型,性別,愛(ài)好...的驗(yàn)證)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手