form表單驗證-Javascript

来源:http://www.cnblogs.com/pengbo518/archive/2016/12/28/6231285.html
-Advertisement-
Play Games

Form表單驗證: js基礎考試內容,form表單驗證,正則表達式,blur事件,自動獲取數組,以及css佈局樣式,動態清除等。完整代碼如下: 效果 如下圖所示: 【結語】 三人行,必有我師焉。 ——請多多支持,多多評論。 ...


Form表單驗證:

js基礎考試內容,form表單驗證,正則表達式,blur事件,自動獲取數組,以及css佈局樣式,動態清除等。完整代碼如下:

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3     <head>
  4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5         <title>form-lpb</title>
  6         <style>
  7             body {
  8                 background:#CCF;
  9                 font-size:12px;    
 10             }
 11             .box {
 12                 margin:20px 50px;
 13                 line-height:25px;        
 14             }
 15             .box .box_sel {
 16                 margin-left:25px;        
 17             }
 18              .text {
 19                 text-align:right;        
 20             }
 21             span {
 22                 color:#900;        
 23             }
 24             .length {
 25                 width:38px;        
 26             } 
 27         </style>   
 28     </head>
 29     
 30     <body>
 31         <div class="box">
 32                 <!--form  star-->
 33             <form action="submit.html" onsubmit="return checkAll()">
 34                 <table>
 35                     <tr>
 36                         <td class="text">賬號</td>
 37                         <td><input type="text" id="userName" onblur="b_userName()" /></td>
 38                         <td><span id="span_userName"></span></td>
 39                     </tr>
 40                     <tr>
 41                         <td class="text"> 密碼</td>
 42                         <td><input type="password" id="pass" onblur="b_pass()" /></td>
 43                         <td> <span id="span_pass"></span></td>
 44                     </tr>
 45                     <tr>
 46                         <td class="text">重覆密碼</td>
 47                         <td><input type="password" id="pass1" onblur="b_pass1()" /></td>
 48                         <td> <span id="span_pass1"></span></td>
 49                     </tr>
 50                     <tr>
 51                         <td class="text">手機號</td>
 52                         <td><input type="text" id="tel" onblur="b_tel()" /></td>
 53                         <td> <span id="span_tel"></span></td>
 54                     </tr>
 55                     <tr>
 56                         <td class="text">身份證號</td>
 57                         <td><input type="text" id="idCard" onblur="b_idCard()" /></td>
 58                         <td><span id="span_idCard"></span></td>
 59                     </tr>
 60                     <tr>
 61                         <td class="text">出生年月日</td>
 62                         <td>
 63                             <input type="text" id="year" class="length" disabled="disabled" />&nbsp;
 64                             <input type="text" id="month" class="length" disabled="disabled" />&nbsp;
 65                             <input type="text" id="day" class="length" disabled="disabled" />
 66                         </td>
 67                     </tr>
 68                     <tr>
 69                         <td class="text"> 郵箱</td>
 70                         <td><input type="text" id="email" onblur="b_email()" /></td>
 71                         <td><span id="span_email"></span></td>
 72                     </tr>
 73                 </table>
 74                 <div class="box_sel">     
 75                 愛好
 76                         <select>
 77                             <option>籃球</option>
 78                             <option>足球</option>
 79                             <option>排球</option>
 80                         </select>
 81                 地區        
 82                         <select>
 83                             <option>河南</option>
 84                             <option>湖南</option>
 85                             <option>河北</option>
 86                         </select>
 87                          <br />
 88                         <input type="checkbox" id="ch_box" onclick="c_box()"  />
 89                             是否同意
 90                             <a href="xieyi.html" target="_blank">公司協議</a>
 91                         <br />
 92                             <input type="submit" id="sub" value="提交註冊" disabled="disabled" />
 93                             <input type="reset" id="rst" value="重新填寫" onclick="sub_return()" />
 94                 </div>        
 95             </form> 
 96             <!--end  form -->
 97         </div>     
 98             <script>
 99                 // 用戶名 校驗
100                 function b_userName(){
101                         var reg = /^[a-zA-Z]{3,9}[_]*[0-9]{3,9}$/;  // 用戶名-正則表達式
102                         var c_use = document.getElementById("userName").value;
103                         var c_span_use = document.getElementById("span_userName");
104                             if(reg.test(c_use)){
105                                 c_span_use.innerHTML="";
106                                 return true;
107                             }else {
108                                 c_span_use.innerHTML="用戶名必須以3-9個字母開頭,可以有下劃線_,後面3-9個數字";    
109                             }                
110                 }
111                 // 密碼  校驗 
112                 function b_pass(){
113                         var reg = /^[a-zA-Z]{3,6}[_]*[0-9]{3,9}$/; // 密碼-正則表達式
114                         var c_pass = document.getElementById("pass").value;
115                         var c_span_pass =document.getElementById("span_pass");
116                             if(reg.test(c_pass)){
117                                 c_span_pass.innerHTML="";
118                                 return true;
119                             }
120                             
121                             else {
122                                 c_span_pass.innerHTML="密碼必須以3-6個英文字母開頭,後面3-9個數字";
123                                 return false;    
124                             }
125                 }
126                 //  重覆密碼 校驗、
127                 function b_pass1(){
128                         var cm = document.getElementById("pass1").value;
129                         var cm_sp = document.getElementById("span_pass1");
130                         var c_pass = document.getElementById("pass").value;
131                             if(cm==c_pass&&cm!=""){
132                                 cm_sp.innerHTML="";
133                                 return true;
134                             }else{
135                                 cm_sp.innerHTML="請重覆密碼";    
136                                 return false;
137                             }        
138                 }
139                 // 手機號 校驗
140                 function b_tel(){
141                         var reg = /^(\+86)?[1][3,5,8][0-9]{9}$/;
142                         var c_tel = document.getElementById("tel").value;
143                         var c_span_tel = document.getElementById("span_tel");
144                             if(reg.test(c_tel)){
145                                 c_span_tel.innerHTML="";
146                                 return true;    
147                             }else {
148                                 c_span_tel.innerHTML="手機號可以(+86)第一位是1,第二位是【3,5,8】,共11位數字";
149                                 return false;
150                             }    
151                 }
152                 // 身份證號 校驗
153                 function b_idCard(){
154                         var reg = /\d{17}\w{1}|\d{15}/;
155                         var c_idCard = document.getElementById("idCard").value;
156                         var c_span_idCard = document.getElementById("span_idCard");
157                             if(reg.test(c_idCard)){
158                                 c_span_idCard.innerHTML="";
159                                 document.getElementById("year").value=c_idCard.substr(6,4);// 自動 獲取 年份 
160                                 document.getElementById("month").value=c_idCard.substr(10,2);// 自動 獲取 月份
161                                 document.getElementById("day").value=c_idCard.substr(12,2);
162                                 return true;
163                             }else{
164                                 c_span_idCard.innerHTML="身份證格式錯誤,必須是18位數或者是15位數";
165                                 document.getElementById("year").value="";// 自動 獲取 年份 
166                                 document.getElementById("month").value="";// 自動 獲取 月份
167                                 document.getElementById("day").value="";
168                                 return false;
169                             }    
170                 }
171                 // 郵箱  校驗
172                 function b_email(){
173                         var reg = /\w+@\w+\.\w+/;
174                         var c_email = document.getElementById("email").value;
175                         var c_span_email = document.getElementById("span_email");
176                             if(reg.test(c_email)){
177                                 c_span_email.innerHTML="";
178                                 return true;
179                             }else {
180                                 c_span_email.innerHTML="郵箱格式錯誤,必須包含 @ 和 . ";
181                                 return false;                        
182                             }        
183                 }
184                 // 協議 校驗
185                 function c_box(){
186                         var c_b = document.getElementById("ch_box");
187                         var c_sub = document.getElementById("sub");
188                             if(c_b.checked){
189                                 c_sub.disabled=false;
190                             }else{
191                                 c_sub.disabled=true;    
192                             }                   
193                 }  
194                 // sub_return  當點擊重新填寫時 提交 按鈕 恢復為不可用狀態
195                 function sub_return(){
196                     var subt = document.getElementById("sub	   

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Consul 概念(摘錄): Consul 是 HashiCorp 公司推出的開源工具,用於實現分散式系統的服務發現與配置。與其他分散式服務註冊與發現的方案,比如 Airbnb 的 SmartStack 等相比,Consul 的方案更“一站式”,內置了服務註冊與發現框 架、分佈一致性協議實現、健康檢 ...
  • /** * 橋接模式 * @author TMAC-J * 應用於多維度方案 * 用組合的形式代替繼承 * 符合單一職責原則 * 一個類只有一個引起他變化的原因 * 增加程式靈活性 */ public class BridgePattern { abstract class Road{ Car ca... ...
  • 目錄: 設計模式六大原則(1):單一職責原則 設計模式六大原則(2):里氏替換原則 設計模式六大原則(3):依賴倒置原則 設計模式六大原則(4):介面隔離原則 設計模式六大原則(5):迪米特法則 設計模式六大原則(6):開閉原則 設計模式六大原則(1):單一職責原則 定義:不要存在多於一個導致類變更 ...
  • 在前一篇文中,我們對一個聚合SDK服務端所需要實現的功能作了簡單的分析。通過兩個主要場景的功能流程圖,我們可以看到,作為多款游戲要適配多個渠道的統一請求轉發中心,TYPESDK服務端主要需要實現的功能有以下幾個要點: l 接收請求和返迴響應,通常是HTTP的請求響應。 l 獲取配置信息。 n 識別游 ...
  • ECMAScript 6 是 JavaScript 語言的最新一代標準,當前標準已於 2015 年 6 月正式發佈,故又稱 ECMAScript 2015。 ES6對數據類型進行了一些擴展 在js中使用ES6必須先聲明 嚴格模式 "use strict" let變數 let特性: 1、不允許重覆聲明 ...
  • 項目上,經常需要對數組操作。所以,本文重點講解Array類型的一些常見的操作方法。 ...
  • “什麼是引用類型?”。如果你學過Java或者PHP編程的話,那麼我可以通俗的打個比方的講下,js中的引用類型就好比PHP或者Java中的Class類;那麼引用類型的值(即對象)好比PHP/Java中的Class類實例化後的對象。 ...
  • 音視頻的發展史 早期:<embed>+<object>+文件 問題:不是所有瀏覽器都支持,而且embed不是標準。 現狀:Realplay、window media、Quick Time 、Flash 問題:每個廠商每個標準,網站編碼和格式也都不相同,flash的出現解決了面的問題,但是apple在 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...