JS表單驗證源碼（帶錯誤提示及密碼等級）

来源:https://www.cnblogs.com/chenyingying0/archive/2020/01/04/12149550.html
-Advertisement-
Play Games

先曬圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Index</title> <link rel="stylesheet" href="css/style.css"> </head ...


先曬圖

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 頭部 -->
<header>
    <div class="header-wrap">
        <!-- 左側 -->
        <div class="header-left">
            <div class="logo">
                <img src="img/logo.png">
            </div>
            <div class="logo-text">
                <span class="strong">XX高鐵客戶服務中心 | </span>
                <span>客戶服務</span>
            </div> 
        </div>
        <div class="header-right">
            <span>意見反饋&nbsp;&nbsp;<a href="#">test@com</a></span>
            <span>您好，請<a href="#">&nbsp;登錄</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">註冊</a></span>
            <div class="show-nav">
                <a href="#">
                    我的XX
                    <img src="img/arrow.png">
                </a>
                <div class="hide_nav">
                    <ul>
                        <li class="first-li">未完成訂單</li>
                        <li>已完成訂單（改/退）</li>
                        <li class="line">我的保險</li>
                        <li class="line">查勘個人信息</li>
                        <li>賬戶安全</li>
                        <li class="line">常用聯繫人</li>
                        <li class="line">重點旅客預約</li>
                        <li>遺失物品尋找</li>
                        <li class="line">服務查詢</li>
                        <li class="line">投訴</li>
                        <li>建議</li>
                    </ul>
                </div>
            </div>
            <span class="phone">
                <img src="img/phone.png">
                <a href="#">手機版</a>
            </span>    
        </div>
    </div>
</header>
<!-- 主體部分 -->
<div class="content">
    <p class="title">
        <span class="strong">您現在的位置：</span>
        <span>客運首頁 > 註冊</span>
    </p>
    <div id="Total">
        <div id="Title">賬戶信息</div>
        <div class="item">
            <span class="important">*</span>
            <label for="userAccount">用 戶 名 :</label>
            <input type="text" id="userAccount" placeholder=" 用戶設置成功後不可修改">
            <span class="item_">6-30位字母、數字或“_”，字母開頭</span>
        </div>
        <div class="item" style="margin-bottom: -28px;">
            <span class="important">*</span>
            <label for="userPass">登陸密碼 :</label>
            <input type="password" id="userPass" placeholder=" 6-20位字母、數字或符號" style="top: 15px;">
            <span id="first"></span>
            <span id="second"></span>
            <span id="third"></span>
            <span class="item_" style="display: block;margin-top: 39px;margin-left: 161px;"></span>
        </div>
        <div class="item">
            <span class="important">*</span>
            <label for="userPass_">確認密碼 :</label>
            <input type="password" id="userPass_" placeholder=" 再次輸入您的登錄密碼">
            <span class="item_"></span>
        </div>
        <div class="item">
            <span class="important">*</span>
            <label for="userName">姓　　名 :</label>
            <input type="text" id="userName" placeholder=" 請輸入姓名">
            <span class="item_" id="show_div"><a href="#" class="line">姓名填寫規則</a></span>
            <div class="hide_div">
                <p>1.確認姓名中生僻字無法輸入時，可用生僻字拼音或同音字替代。<br>
2.輸入姓名保存後，遇有系統無法正確顯示的漢字，可用該漢字的拼音或同音字重新修改後保存。<br>
3.姓名中有繁體字無法輸入時，可用簡體替代。<br>
4.姓名較長，漢字與英文字元合計超過30個（1個漢字算2個字元）的，需按姓名中第一個漢字或英文字元開始按順序連續輸入30個字元（空格字元不輸入），其中英文字元輸入時不區別大小寫
                </p>
            </div>
        </div>
        <div class="item">
            <span class="important">*</span>
            <label for="idinfo">身份證號 :</label>
            <select name="idinfo" id="idinfo">
                <option value="" selected="selected">二代身份證</option>
                <option value="">港澳通行證</option>
                <option value="">臺灣通行證</option>
                <option value="">護照</option>
            </select>
        </div>
        <div class="item" style="margin-top: 51px;">
            <span class="important">*</span>
            <label for="information">證件號碼 :</label>
            <input type="text" id="information" placeholder=" 請輸入您的證件號碼">
            <span class="item_"></span>
        </div>
        <div class="item">
            <span class="important">*</span>
            <label for="email">郵　　箱 :</label>
            <input type="email" id="email" placeholder="請輸入正確郵箱格式">
            <span class="item_"></span>
        </div>
        <div class="item">
            <span class="important">*</span>
            <label for="telephone">手機號碼 :</label>
            <input type="tel" id="telephone" placeholder=" 請輸入您的手機號碼">
            <span class="item_">請正確填寫手機號碼，稍後將向該手機號碼發送簡訊驗證碼</span>
        </div>
        <div class="item">
            <span class="important">*</span>
            <label for="curtomer">旅客類型 :</label>
            <select name="curtomer" id="curtomer">
                <option value="" selected="selected">成人</option>
                <option value="">兒童</option>
                <option value="">學生</option>
                <option value="">殘疾軍人</option>
                <option value="">傷殘人民警察</option>
            </select>
            <span class="item_"></span>
        </div>
        <div id="end">
            <input type="checkbox" id="choose">
            <label for="choose">我已閱讀並同意遵守<a href="#">《中國鐵路客戶服務中心網站服務條款》</a></label>
            <div class="btn_box">
                <button id="handup">下一步</button>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<footer>
    <p>關於我們 | 網站聲明</p>
    <p>Copyright &copy; 2019 test.com All rights reserved | 京ICP備 xxxxxxxx號</p>
</footer>
<script src="js/index.js"></script>
</body>
</html>

style.css

label {
  cursor: pointer; }

a{
  color:inherit;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box; }

/*頭部*/
header{
  width:100%;
  height:120px;
  background-color:rgb(239,239,239);
  border-bottom:2px solid rgb(36,135,201);
}

.header-wrap{
  width:1200px;
  margin:0 auto;
}

.header-wrap span,
.header-wrap img{
  cursor:pointer;
}

.header-wrap a:hover{
  color:rgb(251,116,3);
}
/*導航左側*/
.header-left{
  float:left;
  width:500px;
}

.logo{
  float:left;
  width:100px;
  margin-right:28px;
}

.logo-text{
  float:left;
  width:300px;
  color:rgb(110,110,110);
  height: 120px;
  line-height: 120px;
}

.logo-text .strong{
    font-size: 20px;
    font-weight: bold;
    color: rgb(80,80,80);
}
/*導航右側*/
.header-right{
  float:right;
  width:700px;
  height: 120px;
  line-height: 120px;
  padding-left:60px;
  position: relative;
}

.header-right img{
  width:14px;
}

.header-right span{
  margin-right:30px;
  float:left;
}

.show-nav{
  cursor:pointer;
  position: relative;
  z-index: 5;
  float:left;
}
/*隱藏區域*/
.hide_nav{
  display: none;
  position: absolute;
  width: 154px;
  background-color: #fff;
  border: 1px solid rgb(251,116,3);
  left: 0;
  font-size: 14px;
  top: 86px;
}

.show-nav:hover .hide_nav{
  display: block;
}

.hide_nav ul{
  width: 100%;
  padding: 0 10px;
}

.hide_nav ul li{
  line-height: 37px;
  height: 37px;
  width: 100%;
  color:rgb(110,110,110);
  cursor:pointer;
}

.hide_nav ul li:hover{
  color:rgb(251,116,3);
}
.line{
  border-bottom:1px dotted rgb(110,110,110);
}
.phone{
  margin-left:20px;
}
/*圖標和文字垂直居中對齊*/
.phone img, .phone a{
  vertical-align:middle;
}
/*主體*/
.content{
  width:1200px;
  background: white;
  margin:0 auto;
  height: 1115px;
}

.title{
  margin-top:20px;
  margin-left:5px;
}

.title span{
  color:rgb(110,110,110);
}

.title span.strong{
    font-size: 20px;
    font-weight: bold;
    color: rgb(80,80,80);
}

#Total {
    box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2);
    width: 1200px;
    min-height: 800px;
    margin: 30px auto;
    border-radius: 10px;
    overflow: hidden;
    border-left: 0.5px solid rgba(0, 0, 0, 0.32);
    border-right: 0.5px solid rgba(0, 0, 0, 0.32);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.32); 
}

#Total #Title {
    background: rgb(251,116,3);
    color: white;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    padding-left: 18px;
    margin-bottom: 60px; 
}

#Total .item, #Total .item_ {
    width: 90%;
    margin: 10px auto;
    font-size: 16px;
    font-weight: bold;
    position: relative; 
}

#Total .item.item, #Total .item_.item {
    margin-top: 25px; 
}


#Total .item .important, #Total .item_ .important {
    color: rgb(251,116,3);
    margin-left: 62px; 
}

#Total .item input, #Total .item_ input {
    position: absolute;
    width: 300px;
    height: 30px;
    top: 32%;
    left: 15%;
    margin-top: -20px;
    font-size: 15px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: box-shadow .5s; 
}

#Total .item input:focus, #Total .item_ input:focus {
    box-shadow: 1px 1px 10px #6385d1, 1px 1px 10px #6385d1; 
}

#Total .item.item_, #Total .item_.item_ {
    height: 30px; 
    font-size: 15px;
    color: rgb(251,116,3);
    font-weight: lighter;
    margin: 0;
    display: inline-block;
    margin-left: 473px;
}

#Total .item_.item_{
    position: relative;
    top: -21px;
}

.item_ a{
    text-decoration: underline;
}

select{
    width: 297px;
    margin-left: 10px;
    height: 34px;
    font-size: 14px;
    color: rgb(110,110,110);
}

#first{
    display: inline-block;
    z-index: 5;
    position: relative;
    width:50px;
    height:10px;
    background-color: red;
    margin-left: 320px;
}

#second{
    display: inline-block;
    z-index: 5;
    position: relative;
    width:50px;
    height:10px;
    background-color: #ccc;
}

#third{
    display: inline-block;
    z-index: 5;
    position: relative;
    width:50px;
    height:10px;
    background-color: #ccc;
}

#Total #end {
    text-align: center;
    height: 160px;
    line-height: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.8);
    width: 100%;
}

#Total #end #choose {
    margin-right: 6px; 
}

.btn_box{
  margin-top:20px;
}

#Total #end #handup {
    width: 197px;
    height: 30px;
    border: none;
    background: rgb(251,116,3);
    color: white;
    border-radius: 3px;
    margin-left: 10px; 
    cursor: pointer;
}

#Total #end #handup:hover{
    background: rgb(36,135,201);
}

#end a{
    color:rgb(36,135,201);
}
/*隱藏的姓名規則*/
.hide_div{
    position: absolute;
    width: 531px;
    font-size: 13px;
    left: 558px;
    border: 1px solid rgb(36,135,201);
    padding: 20px;
    line-height: 35px;
    top: 21px;
    color: rgb(110,110,110);
    display: none;
}

#show_div:hover+.hide_div{
    display: block;
}

/*底部*/
footer{
    height: 113px;
    background: #eee;
    text-align: center;
    padding: 40px;
    color: rgb(110,110,110);
    border-top:2px solid rgb(36,135,201);
}

index.js

//獲取元素
var userAccount=document.getElementById('userAccount');
var userPass=document.getElementById('userPass');
var userPass_=document.getElementById('userPass_');
var userName=document.getElementById('userName');
var information=document.getElementById('information');
var email=document.getElementById('email');
var telephone=document.getElementById('telephone');
var handup=document.getElementById('handup');
var first=document.getElementById('first');
var second=document.getElementById('second');
var third=document.getElementById('third');
var choose=document.getElementById('choose');
var items=document.querySelectorAll(".item_");//獲取所有提示元素的下標
//當滑鼠離開輸入框，產生驗證
//格式正確 true
var test1=false;
var test2=false;
var test3=false;
var test4=false;
var test5=false;
var test6=false
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android中實現自定義View組件並使其能跟隨滑鼠移動
    場景 實現效果如下 註： 博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 新建Android項目，首先打開activity_main.xml 修改其為FrameLayout幀佈局管理 ...
  • Android5.0和Android6.0適配
    gradle配置項 1. compileSdkVersion 用哪個 Android SDK 版本編譯你的應用。因此我們強烈推薦總是使用最新的 SDK 進行編譯。在現有代碼上使用新的編譯檢查可以獲得很多好處，避免新棄用的 API ，並且為使用新的 API 做好準備。 2. minSdkVersion ...
  • JS 數組 常用方法
    一、數組 1、function(value, index, array) {} 【格式：】 function (value, index, array) => { // value 指 數組當前遍歷的值， index 指 數組當前遍歷的下標， array 指 當前數組 // ... 自定義函數行為 ...
  • 響應式佈局淺析
    所謂響應式佈局，就是頁面會根據當前運行的設備的大小自行進行調整，實現方案主要有以下三種： 1）隱藏 例如在 PC 端的一些友情鏈接或者不重要的內容在移動端可以選擇隱藏起來。 2）換行 在 PC 端顯示一行的內容，由於移動端設備寬度比較小，所以可以選擇顯示為幾行。 3）自適應空間 例如，左邊元素給定一 ...
  • Json與Ajax(註冊實例）
    需要在伺服器上進行哈 jquery的ajax方法： // jquery請求 $.ajax({ url: "./server/slider.json", type: "post", dataType: "json", async: true, success: function(datas) { re ...
  • Jquery基礎（動畫效果的輪播圖特效）
    jquery文檔準備的三種寫法： $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jquery選擇器 基本選擇器 $('*') / $('.div') / $('div') / $('# ...
  • 標簽對象-自定義屬性-傳值
    標簽對象-自定義屬性-傳值 1、給標簽對象添加自定義屬性 flag="tip" <Input flag="tip" onChange={event => this.handleChange(event)} /> 2、getAttribute 獲取自定義屬性 console.log(event.tar ...
  • react 報紅錯誤彙總
    react 報紅錯誤彙總 一、Uncaught TypeError: Cannot read property 'value' of undefined 未知類型錯:無法讀取未定義的屬性“value” 我的源碼： console.log(item.controlAttributeObj.placeh ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類