基礎表單驗證

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

<!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>
 
簡單效果如下:
 

 


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

更多相關文章
  • 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 效果 ...
一周排行
  • 一、直接使用線程的問題每次都要創建Thread對象,並向操作系統申請創建一個線程,這是需要耗費CPU時間和記憶體資源的。無法直接獲取線程函數返回值無法直接捕捉線程函數內發生的異常 使用線程池可以解決第一個問題二、.NET中的線程池 在這裡只簡單的介紹一下ThreadPool,由於TPL的存在,我工作中... ...
  • 上次課程我們新建了管理員的模板頁。 本次我們就完善這個模板頁,順便加入樣式和一些基本的組件,配置好整個項目的UI風格。 一、引入 共用的css和js文件 後端庫用nuget, 前端庫用libman. 右鍵wwwroot文件夾,選擇菜單 Add / Client-Side Library 我們使用ad ...
  • 場景 在使用IIS部署ASP.NET的Web項目時提示: InvalidOperationException:未能映射路徑“/” 註: 博客: https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 ...
  • 場景 ASP.NET中新建MVC項目並連接SqlServer資料庫實現增刪改查: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107024544 在上面實現了新建簡單的MVC項目以及連接資料庫實現簡單的增刪改查後怎樣將網站部署到 ...
  • --先給GridView控制項註冊滑鼠按下事件gv.MouseDown += new System.Windows.Forms.MouseEventHandler(this.gv_MouseDown); --在滑鼠按下事件裡面增加滑鼠右鍵判斷,並增加滑鼠右鍵菜單複製單元格功能。 private voi ...
  • 用C#代替Javascript來做Web應用,是有多爽? 今天聊聊 Blazor。 Blazor 是一個 Web UI 框架。這個框架允許開發者使用 C# 來創建可運行於瀏覽器的具有完全交互 UI 的 Web 應用。 可以理解為,這是一個 C# 語言的 Vue / Angular / React,可 ...
  • 場景 ASP.NET中新建Web網站並部署到IIS上(詳細圖文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107199747 在上面博客中已經將網站部署到了IIS上。 但是如果網站很大,頁面比較多,甚至每個頁面都有不少 ...
  • 從事這麼多年的.NET,這段時間來,學習另外一門技術Python。 購買相關的書籍,不停地看書。 然後在VS安裝Python,然後可以上機練習,編寫代碼...... ...
  • 一個微小的投入就會帶來巨大的突變 集群安全模式 為什麼出現集群安全模式呢? ​ Namenode啟動時,首先將鏡像文件載人記憶體,並執行編輯日誌中的各項操作。一旦在內存中成功建立文件系統元數據的映像,則創建一個新的Fsimage文件和一個空的編輯日誌。此時,** Namenode開始監聽Datanod ...
  • 1. 通過new對象實現反射機制( 對象.getClass() ) 2. 通過路徑實現反射機制( Class.forName("包名.類名") ) 3. 通過類名實現反射機制 ( 類名.Class ) class Student { private int id; String name; prot ...