JS簡單驗證

来源:http://www.cnblogs.com/zxf100/archive/2017/05/29/6919164.html
-Advertisement-
Play Games

1.驗證是否全為數字 2.驗證郵箱 3驗證手機號 4.驗證身份證號 5.驗證時間格式 下麵是代碼,可直接用,有註釋 運行結果如圖: 當驗證全部通過時,會通過post方式提交給後臺! ...


1.驗證是否全為數字

2.驗證郵箱

3驗證手機號

4.驗證身份證號

5.驗證時間格式

下麵是代碼,可直接用,有註釋

<html>
<meta charset="utf-8">
<head>
    <title></title>
</head>
<script type="text/javascript">
//驗證是否全部為數字
function checkNum(){
    //獲取num的值,並過濾兩邊多餘的空格
    var num = document.getElementById('num').value.trim();
    //判斷是否匹配
    if (num.match(/^[0-9]*$/g) == null) {
        //不匹配提示,並返回false
        document.getElementById('tip1').innerHTML="<font color='red'>不全是數字";
        return false; 
    }else{
        //匹配提示,並返回true
        document.getElementById('tip1').innerHTML="";
        return true;
        }
    return check();
}

//郵箱驗證
function checkEmail(){
    var email = document.getElementById('email').value.trim();
    //以數字,大/小寫字母_.-開頭,中間是"@.",以大/小寫,數字結尾
    if (email.match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/g) == null) {
        document.getElementById('tip2').innerHTML="<font color='red'>郵箱格式不正確";
        return false;
    }else{
        document.getElementById('tip2').innerHTML="";
        return true;
    }
    return check();
}

//檢查手機號
function checkTel(){
    var tel = document.getElementById('tel').value.trim();
    //手機號以1開頭,第二位是34578,再加上9位數字
    if (tel.match(/^1[34578]\d{9}$/g) == null) {
        document.getElementById('tip3').innerHTML="<font color='red'>手機號必須是11位的數字";
        return false;
    }else{
        document.getElementById('tip3').innerHTML="";
        return true;
    }
    return check();
}

//檢查身份證號
function checkIdcard(){
    var idcard = document.getElementById('idcard').value.trim();
    //身份證號碼為15位或者18位,15位時全為數字,18位時前17位為數字,最後一位是校驗位,可能為數字或字元X
    if (idcard.match(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/g) == null) {
        document.getElementById('tip4').innerHTML="<font color='red'>身份證號必須為15或18位";
        return false;
    }else{
        document.getElementById('tip4').innerHTML="";
        return true;
    }
    return check();
}

//校驗時間格式
function checkDate(){
    var date = document.getElementById('date').value.trim();
    //長時間,形如 (2003-12-05 13:04:06)
    if (date.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/g) == null) {
        document.getElementById('tip5').innerHTML="<font color='red'>時間格式為2017-5-05 13:04:06";
        return false;
    }else{
        document.getElementById('tip5').innerHTML="";
        return true;
    }
    return check();

}

//總判斷函數check(),上述所有函數必須全部判斷通過,此函數的返回值才是真,一個為假,此式就為假
function check() {  
    var check =checkNum()&&checkEmail()&&checkTel()&&checkIdcard()&&checkDate();
    if (check) {
        return true;
    }else{
        return false;
    }  
} 
</script>

<body>
<form action="test.php"  method="post" onSubmit="return check();">

驗證是否為數字:<input type="text" id="num" name="num" required ><span id="tip1"></span> <br>
驗證郵箱格式<input type="text" id="email" name="email" required ><span id="tip2"></span> <br>
驗證手機號<input type="text" id="tel" name="tel" required ><span id="tip3"></span> <br>
驗證身份證號<input type="text" id="idcard" name="idcard" required ><span id="tip4"></span> <br>
驗證時間格式<input type="text" id="date" name="date" required ><span id="tip5"></span> <br>

<input type="submit" value="提交">
</form>

</body>
</html>

運行結果如圖:

當驗證全部通過時,會通過post方式提交給後臺!

 


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

-Advertisement-
Play Games
更多相關文章
  • JavaScript是一門弱類型語言,它的數據類型分為兩大類:簡單數據類型(5種:Undefined、Null、Boolean、Number、String)和複雜數據類型(1種:Object)。Object是ECMAScript中使用最多的一個類型,所有的引用類型的值都是Object類型的實例。引用 ...
  • rem單位大家可能已經很熟悉,rem是隨著html的字體大小來顯示代表寬度的方法,我們怎樣進行移動端響應式開發呢 瀏覽器預設的字體大小為16px 及1rem 等於 16px 如果我們想要使1rem等於 12px 只需設置html的字體大小為 12/16 及html的字體大小為font-size:75 ...
  • 語義化是指用合理HTML標記以及其特有的屬性去格式化文檔內容。通俗地講,語義化就是對數據和信息進行處理,使得機器可以理解. 語義化的HTML文檔有助於提升你的網站對訪客的易用性,比如使用PDA、文字瀏覽器以及殘障人士將從中受益。對於搜索引擎或者爬蟲軟體來說,則有助於它們建立索引,並可能給予一個較高的 ...
  • 我們在angualrjs移動開發中遇到輪播圖的功能 安裝 swiper npm install --save swiper 或者 bower install --save swiper 引入文件路徑 指令中的編寫方式 ...
  • 創建對象 Object構造器的參數如果為空或null、undefined將返回一個空的Object對象,如果為其他值則調用相應的構造器,如 如果傳遞多個參數取第一個,由於使用構造器來創建對象需要判斷參數所以一般比我們直接使用字面量{}創建對象要慢一些。 我們也可以自己定義一個構造器來創建對象,如下 ...
  • 要介紹css的float浮動屬性,就必須先瞭解一下標準文檔流 標準文檔流: 在沒有css的干預下,塊級元素獨占一行,可以設置寬高,行內元素併排顯示,寬高自動填充。 HTML頁面的標準文檔流(預設佈局)是:從上到下,從左到右,遇塊(塊級元素)換行。 float浮動屬性最開始的用法是實現讓目標內容被文字 ...
  • 1.打開Vue腳手架的github地址:https://github.com/vuejs/vue-cli,在README查看如何安裝 2.通過npm安裝vue 3.通過webpack安裝 4.切換到創建的項目目錄,然後安裝依賴文件 ...
  • 這是為了防止文檔在完全載入(就緒)之前運行 jQuery 代碼。$(document).ready() 方法允許我們在文檔完全載入完後執行函數$(document).ready(function(){ // jQuery methods go here...}); 簡寫:$(function(){ ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...