基礎表單驗證

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

 


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

更多相關文章
  • 初識Nodejs Node.js的誕生 作者Ryan Dahl 瑞恩·達爾 2004 紐約 讀數學博士 2006 退學到智利 轉向開發 2009.5對外宣佈node項目,年底js大會發表演講 2010 加入Joyent雲計算公司 2012 退居幕後 作者Ryan Dahl 瑞恩·達爾 2004 紐約 ...
  • 通配符選擇器 * 與任何元素匹配 派生選擇器: 後代選擇器(包含選擇器):後代選擇器可以選擇作為元素後代的元素 A B 對A元素中的B元素應用樣式 後代選擇器中兩個元素間的層次間隔可以是無限的(也可A B C) ,以上 A B 應用樣式會選擇從A繼承的所有B元素 子元素選擇器:只選擇某個元素的子元素 ...
  • 首發於微信公眾號《前端成長記》,寫於 2019.10.12 導讀 有句老話說的好,好記性不如爛筆頭。人生中,總有那麼些東西你願去執筆寫下。 本文旨在把整個搭建的過程和遇到的問題及解決方案記錄下來,希望能夠給你帶來些許幫助。 本文涉及的主要技術: "Vue3.0 Composition API" "G ...
  • 看了知乎上的話題 如何才能通俗易懂的解釋javascript裡面的‘閉包’?,受到一些啟發,因此結合實例將回答中幾個精要的答案做一個簡單的分析以便加深理解。 1. "閉包就是跨作用域訪問變數。" 【示例一】 在 getName 函數中獲取 name,首先在 getName 函數的作用域中查找 nam ...
  • 前面,跟大家簡單地介紹了負載均衡和Nginx的一些基礎配置( "Nginx負載均衡配置實例" ),接下來,跟大家介紹一下Nginx的常用命令,便於日常的運維。 "查看原文" 停止Nginx的方法 通過之前的學習,大家知道瞭如何配置並啟動Nginx,但如果想停止Nginx服務,該如何操作呢?下麵介紹停 ...
一周排行
  • 場景 在Winfom中可以在頁面上多個按鈕或者右鍵的點擊事件中觸發同一個自定義的委托事件。 實現 在位置一按鈕點擊事件中觸發 string parentPath = System.IO.Directory.GetParent("指定路徑").ToString(); //獲取指定路徑的父級目錄並作為參 ...
  • asp.net 根據html模板導出excel public class ExcelHelper { /// <summary> /// 根據html模板文件生成excel文件 /// </summary> /// <param name="ds">數據源</param> /// <param na ...
  • asp.net 使用NPOI讀取excel文件內容 NPOI下載地址:NPOI public class ExcelHelper { /// <summary> /// 讀取Excel文件數據到DataSet,一個Sheet對應一個DataTable /// </summary> /// <para ...
  • 場景 使用Visual Studio 開發Winform程式,使用SVN進行項目版本管理。 在添加引用時,會出現在A電腦中添加了絕對路徑的引用,在B電腦中就會出現找不到 並且將此引用標識為?的狀態。 註: 博客主頁: https://blog.csdn.net/badao_liumang_qizhi ...
  • asp.net 使用 Application 限制單一登錄 原理:用戶登錄後系統會分配一個與用戶唯一對應的SessionID,將當前用戶ID與其SessionID對應保存在Application中,一旦該用戶在其他地方重覆登錄則Application中保存的SessionID就會被更新,導致當前se ...
  • 當我們的系統時間不正常,比如設置一個日期-1999年9月9日,會引發證書問題。 系統時間不正常-IE有概率能訪問 觸發NavigateError事件,異常代碼INET_E_INVALID_CERTIFICATE -- 這是一個必要不充分條件,系統時間不正常時IE有相關證書異常,更新時間能解決此類異常 ...
  • //加密 public static string GDEncode(string data, string Key) { Key = "12345678"; byte[] byKey = System.Text.ASCIIEncoding.ASCII.GetBytes(Key); byte[] b ...
  • static void CopyFiles() { string sourceDir = @"D:\C\ll"; string destDir = @"D:\LL"; if (!Directory.Exists(destDir)) { Directo... ...
  • //接收的為空時,則表示客戶端下線,跳出迴圈 if (r == 0) { break; }; string str = Encoding.UTF8.GetString(buffer, 0, r); //RemoteEndPoint:可以得到遠程客戶端的IP和埠號。 ShowMsg(socketSe... ...
  • 本文梯子 前言 1、.net core 框架性能測試 2、.net core 執行過程 3、中間件執行過程 4、AOP切麵 5、整體框架結構與資料庫表UML 一、創建第一個Core 1、SDK 安裝 2、新建項目 2、新建項目(3.0SDK) 3、項目整體結構分析 二、重要文件說明 1、Progra ...
x