基礎表單驗證

来源:https://www.cnblogs.com/yanqianqian/archive/2019/10/14/11673804.html
-Advertisement-
Play Games

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv ...


<!DOCTYPE html> <html lang="en">

 

<head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         * {             margin: 0;             padding: 0;         }                  a {             text-decoration: none;         }                  .register {             width: 1000px;             height: 500px;             background-color: #409eff;             border-radius: 10px;             margin: 50px auto;         }                  .register .register-right {             float: left;             width: 50%;             height: 500px;             text-align: center;         }                  .register .register-left {             float: right;             width: 50%;             height: 500px;             background-color: #fff;             text-align: center;         }                  .register-left .l {             width: 18px;             height: 38px;             color: #dddfe4;             font-size: 12px;         }                  .register-left .user,         .register-left .psd {             outline: none;             border: none;             width: 282px;             height: 38px;         }                  .register .register-left .register-left-ipt {             width: 315px;             height: 38px;             border-bottom: 1px solid #67c23a;             margin: 0 auto;             margin-top: 30px;         }         /* 輸入的樣式 */                  .register-left-ipt .empty,         .register-left-ipt .emptys {             font-size: 12px;             color: red;         }                  .register-left .enter {             width: 300px;             height: 40px;             border: 1px solid #409eff;             border-radius: 10px;             margin: 48px auto;         }                  .register-left .enter a {             font-size: 12px;             color: #409eff;             display: block;             text-align: center;             line-height: 40px;         }     </style> </head>

 

<body>     <!-- 登錄頁面開始 -->     <div id="divbg">         <div class="register">             <div class="register-left">                 <h2>登錄後臺</h2>                 <div class="register-left-ipt">                     <input type="username" placeholder="用戶名" class="user">                     <p class="empty"></p>                 </div>                 <div class="register-left-ipt">                     <input type="password" placeholder="用戶密碼" class="psd">                     <p class="emptys"></p>                 </div>             </div>         </div>     </div>     <!-- 登錄頁面結束 --> </body>

 

</html> <script src="./cxbk/dist/jquery-3.4.0.min.js"></script>   //自己需要設置 jQuery 地址 <script>     //表單驗證     //失去焦點的時候       //-1.獲取input 表單里用戶輸入的值    if  如果為空給用戶相應的提示 " * 用戶名不能為空 "     //-2.寫一個正則  獲取的值和正則比對如果不符合給出相應的提示  " * 用戶名格式不符合 "     //失去焦點     //     //     //用戶名設置     $('.user').blur(function() { //失去焦點事件         var reg = /^[a-zA-Z]{1}/; //設置相應的正則表達式         var value = $(this).val().trim(); //獲取輸入框內的值,同時清除空格         if (!value) { //判斷為空(取反)             $('.empty').html('用戶名不能為空') //找到類名為.empty,在頁面添加 html('')值         } else if (!reg.test(value)) { //判斷是否符合正則表達式             $('.empty').html('用戶名格式不符合');             return false         } else {             $('.empty').html('') //否則添加添加 html('')值為空         }     });     //     //     //密碼設置     $('.psd').blur(function() {         var reg = /^[a-zA-Z]{1}/;         var value = $(this).val().trim();         if (!value) {             $('.emptys').html('密碼不能為空')         } else if (!reg.test(value)) {             $('.emptys').html('密碼格式不符合')             return false         } else {             $('.emptys').html('')         }     }) </script>   簡單效果如下:  

 


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

-Advertisement-
Play Games
更多相關文章
  • Hbase的客戶端有原生java客戶端,Hbase Shell,Thrift,Rest,Mapreduce,WebUI等等。 下麵是這幾種客戶端的常見用法。 一、原生Java客戶端 原生java客戶端是hbase最主要,最高效的客戶端。 涵蓋了增刪改查等API,還實現了創建,刪除,修改表等DDL操作 ...
  • ss ...
  • 資料庫審計 DBAudit 2019/09/26 Chenxin 資料庫審計 基本概念 資料庫審計(簡稱DBAudit)能夠實時記錄網路上的資料庫活動,對資料庫操作進行細粒度審計的合規性管理,對資料庫遭受到的風險行為進行告警,對攻擊行為進行阻斷。它通過對用戶訪問資料庫行為的記錄、分析和彙報,用來幫助 ...
  • https://blog.csdn.net/qq_18683985/article/details/97374288 ...
  • 寫了一個自定義的UIView,其中包含代理 <!--5f39ae17-8c62-4a45-bc43-b32064c9388a:W3siYmxvY2tJZCI6IjIwMTAtMTU3MTAzNjc3OTIyNiIsImJsb2NrVHlwZSI6ImltYWdlIiwic3R5bGVzIjp7ImJ ...
  • 「柒留言」更新的換國旗頭像小功能,獲取頭像顯示模糊... 1、頭像模糊 國慶之前,更新了「柒留言」小程式加國旗頭像的小功能,但是頭像模糊這個坑我在發佈新版之前還沒解決。 一直以為是代碼出了問題,各種搜索,巧的是正好也有類似的答案,然後我就被帶進鍋里了,弄了半天還是模糊,無奈之下弄了個用戶自行上傳圖片 ...
  • 直接貼代碼吧: html代碼 css代碼: 實現效果: 知識點總結:1.uli li橫向排列可使用float,之前經常使用diplay:flex;這個可能會導致一些問題,後面遇到再添上 2.父元素:hover >子元素{ dispay:block/none}:通過父元素hover屬性控制子元素顯示與 ...
  • css 效果 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...