2. 程式人生 > >二十四、form 表單驗證+簡單註冊正則表示式

二十四、form 表單驗證+簡單註冊正則表示式

阿新 • • 發佈：2019-02-03

2.驗證正則表示式

var email=/^\w{5,10}\@[0-9a-z]{2,5}\.[c,o,m]{3}$/;

郵箱驗證碼：6位純數字驗證碼

var id_e=/^\d{6}$/;

密碼：字母/數字/英文符號(最短8位)

var password=/^[0-9a-zA-Z.,;'/]{8,}$/;

3.封裝驗證錯誤提示資訊

//錯誤提示函式function errorshow(num,str,res){//嘗試獲取錯誤提示var error=txt[num].parentNode.getElementsByClassName("error")[0];if(res){ //res==trueif(error!=undefined){if

(error.length!=0){error.remove();            }return;        }    }else{ //res==falseif(error!=undefined){ //同一輸入行多種錯誤提示切換error.innerHTML=str;        }else{/*建立錯誤提示*/var err=document.createElement("span");err.className="error";err.innerHTML=str;txt[num].parentNode.appendChild(err);        }    }}

4.正則判斷呼叫錯誤提示資訊方法；

提示效果：完整程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表單正則表示式</title>
    <style>
        *{margin: 0;padding: 0;}
        body,html{
            background-color: #f6f8f9;}
        .block{
            width: 800px;
            height: 600px;
            margin: 0 auto;
            background-color: #fff;
        }
        .ulist{
            margin: 0 120px;
        }
        .list{
            list-style: none;
            /*line-height: 100px;*/
            margin-top: 30px;
        }
        .span{
            display: inline-block;
            width: 100px;
        }
        .txt{
            display: inline-block;
            width: 300px;
            height: 30px;
            outline: none;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .emil{
            width: 100px;
            height: 32px;
            color: #a5a6aa;
        }
        .zhuce{
            width: 100px;
            height: 32px;
            background-color: #44b549;
            color: white;
            margin-left: 250px;
            outline: none;
            margin-top: 10px;
        }
        .text{
            width: 320px;
            height: auto;
            list-style: none;
            line-height: 20px;
            font-size: 14px;
            color: #8d8d8d;
            margin-left: 100px;
        }
        .error{
            color: red;
            display: block;
            margin-left: 100px;
            line-height: 20px;
            font-size: 14px;
            /*margin-bottom: 5px;*/
        }
    </style>
</head>
<body>
<form class="block" onsubmit="return Submit()">
     <p style="margin-left: 120px;padding-top: 30px;">每個郵箱僅能申請一種帳號 </p>
    <ul class="ulist">
        <li class="list"><span class="span">郵箱</span><input class="txt" type="text"><a href="#" style="text-decoration: none"><button class="emil">啟用郵箱</button></a></li>
        <li class="text">作為登入帳號，請填寫未被微信公眾平臺註冊，未被微信開放平臺註冊，未被個人微訊號繫結的郵箱</li>
        <li class="list"><span class="span">郵箱驗證碼</span><input class="txt" type="text"></li>
        <li class="text">啟用郵箱後將收到驗證郵件，請回填郵件中的6位驗證碼</li>
        <li class="list"><span class="span">密碼</span><input class="txt" type="text"></li>
        <li class="text">字母、數字或者英文符號，最短8位，區分大小寫</li>
        <li class="list"><span class="span">確認密碼</span><input class="txt" type="text"></li>
        <li class="text"> 請再次輸入密碼</li>
    </ul>
    <input class="zhuce" type="submit"value="註冊">
</form>
<script>
        //獲取輸入框元素
        var txt=document.getElementsByClassName("txt");
        //提交方法
        function Submit() {
                    showMsg();
                    return false;
        }


        //判斷表單是否驗證正確方法
        function showMsg(){
            /* 數字/字母/下劃線(5-10位)
 
[email protected]+字母/數字(2-5位)+”.”+com*/
            var email=/^\w{5,10}\@[0-9a-z]{2,5}\.[c,o,m]{3}$/;
            if(txt[0].value.match(email)==null){
                errorshow(0,"請輸入正確的郵箱地址",false);

            }else {
                errorshow(0,"",true);
            }
            /*郵箱驗證碼：6位純數字驗證碼*/
            var id_e=/^\d{6}$/;
            if(txt[1].value==""){
                errorshow(1,"請輸入郵件中的6位驗證碼",false)
            }else {
                if(txt[1].value.match(id_e)==null){
                    errorshow(1,"驗證碼應為6位數字",false)
                }else {
                    errorshow(1,"",true)
                }
            }

            /*字母、數字或者英文符號，最短8位，區分大小寫*/
            var password=/^[0-9a-zA-Z.,;'/]{8,}$/;
            if(txt[2].value==""){
                errorshow(2,"請填寫密碼",false)
            }else {
                if(txt[2].value.match(password)==null){
                    errorshow(2,"密碼長度不足8位",false)
                }else {
                    errorshow(2,"",true)
                }
            }

            /*確認密碼*/
            if(txt[2].value.match(password)==null){
                errorshow(3,"請再次輸入新密碼",false)
            }else {
                if(txt[2].value!=txt[3].value){
                    errorshow(3,"兩次輸入的密碼不一致",false)
                }else {
                    errorshow(3,"",true)
                }
            }
        }

        //錯誤提示函式
        function errorshow(num,str,res){
            //嘗試獲取錯誤提示
            var error=txt[num].parentNode.getElementsByClassName("error")[0];
            if(res){ //res==true
                if(error!=undefined){
                    if(error.length!=0){
                        error.remove();
                    }
                    return;
                }
            }
            else{ //res==false
                if(error!=undefined){ //同一輸入行多種錯誤提示切換
                    error.innerHTML=str;
                }else{
                    /*建立錯誤提示*/
                    var err=document.createElement("span");
                    err.className="error";
                    err.innerHTML=str;
                    txt[num].parentNode.appendChild(err);
                }
            }
        }
</script>
</body>
</html>

相關推薦

二十四、form 表單驗證+簡單註冊正則表示式

2.驗證正則表示式var email=/^\w{5,10}\@[0-9a-z]{2,5}\.[c,o,m]{3}$/;郵箱驗證碼：6位純數字驗證碼var id_e=/^\d{6}$/;密碼：字母/數字/英文符號(最短8位)var password=/^[0-9a-zA-Z.,;'/]{8,}$/;3.封裝驗證

表單驗證時常用正則表示式（以“註冊資訊”為例）

個人在使用時看到網上總結的有很多了，但大多文章表述的都比較抽象，使用時需要自己組合，通常因為懶所以實際在用時習慣直接拿來用，總結的是本人寫程式的過程中用的頻率比較高的幾個例項： 另：這裡有一個博主總結的很不錯，連結貼上 /*驗證是否同意協議*/ function

表單驗證2-JS正則

logs 驗證 -c eight 影響 技術 fff d+ wid 1. JS正則： 以/開頭，以/結尾。 　　test作用：到裏面去找，只要裏面有，就返回true；否則就返回false。 例如：rep=/\d+/; 檢驗裏面是否有數字。 2.rep=/^ $

表單驗證常用的正則表達式

組成 a-z 正整數 位或 而且 中文 功能 判斷 網上 驗證網址：^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\‘:+!]*([^<>\"\"])*$電子郵箱：^[0-9a-z][a-z0-

javascript之表單校驗以及正則表示式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/java

easyUI入門《二十九、form案例：表單提交以及驗證重置清空》

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!--引入

SpringMVC form標籤、伺服器表單驗證、錯誤資訊回顯

form標籤 應用場景：方便伺服器資料在form表單上的展示 使用方式：1.引入標籤庫   2.建立表單   例如：建立兩個實體類 @[email protected]@ToString public class User { private

SpringMVC4+thymeleaf3的一個簡單例項（篇四：form表單資料驗證）

關於表單資料驗證有很多中方法，這裡我僅介紹JSR303註解驗證。 注意在spring的配置檔案spring-mvc.xml中要有這句程式碼：<mvc:annotation-driven/>

跟KingDZ學HTML5之十一 HTML5 Form 表單新元素

rmi 出現 第一個 blog inpu tput form itl scrip 新的課程又開始，哈哈，最近的文章更新比較快，希望大家跟上俺的步伐啊，呵呵，但是每當看到閱讀量，哎，還真不多，可是俺還要堅持寫下去，不知道，大家是不是都沒有在研究HTML5呢？ 這節課程，講的是

django form表單驗證

錯誤 mail 定義 lap hide else ren end blog 簡單例子： 1 #自定義驗證類 2 class Check_form1(forms.Form): 3 #user就是要驗證的字段,這裏對應前端name <inp

二十四、管道符和作業控制、shell變量、環境變量配置文件

管道符和作業控制 shell變量 環境變量配置文件 二十四、管道符和作業控制、shell變量、環境變量配置文件一、管道符和作業控制管道符：| 表示把前面文件輸出的內容傳遞給後面的命令。|grep：過濾，指定關鍵詞的命令。|grep ’aaa‘。作業控制Ctrl+z：暫停一個任務

Django中的Form表單驗證

服務 是否 input req 驗證方法 有著 require DC 通過 回憶一下Form表單驗證的邏輯： 前端有若幹個input輸入框，將用戶輸入內容，以字典傳遞給後端。 後端預先存在一個Form表單驗證的基類，封裝了一個檢測用戶輸入是否全部通過的方法。該方法會先定義好

javascript:正則表達式、一個表單驗證的例子

alt 來替 replace 組合 mail 優先 html javascrip get 閱讀目錄 本文內容： 正則表達式： 利用正則表達式進行表單驗證的例子： 回到頂部 本文內容： 正則表達式 正則表達式的使用方法 正則表達式的特殊匹配字符 正則表

# Django admin、form表單的應用記錄

表單 gets 使用 查找 圖片 clas quest ali password 目錄 Django admin、form表單的應用記錄 一 Django admin 1. 使用介紹 form組件使用 1. form的作用 2. form組件生成HTMKL代碼 3. f

django form 表單驗證

nbsp 驗證 bsp com img 表單驗證 png 表單 djang django form 表單驗證

JavaScript進階（四）form表單校驗

前言       本章將學習表單的校驗，作為一個前面學習的總結！ 方法 1.概念 我們知道，在學習HTML的時候，我們做了一個非常醜陋的表單，裡面有文字框、單選鈕、複選框等一系列表單元素。這些都是隨便填寫的，沒有加任何的校驗。也就是說正常情況下我們需

jq form表單驗證

<form action="" class="idxform1" onsubmit="return formyz('j_name','j_phone','j_em','j_content','j_code')"> <div class="ipt1 "><span&g

django form表單驗證，使用Ajax提交併返回提示資訊（JSON傳遞資料）

直接上程式碼: HTML，由Form外掛自動生成input標籤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax提交

從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 實現授權驗證登陸

壹週迴顧 哈嘍，又是元氣滿滿的一個週一，又與大家見面了，週末就是團圓節了，正好咱們的前後端也要團圓了，為什麼這麼說呢，因為以後的開發可能就需要前後端一起了，兩邊也終於會師了，還有幾天Vue系列就基本告一段落了，大家也好好加油鴨，今天將的內容呢，其實細心的你看到題目應該就能大家猜到了，前提是一直看本系列的小夥

二十九、分割槽表的建立及清理

1、分割槽表建立 --範圍分割槽示例 drop table range_part_tab purge; --注意，此分割槽為範圍分割槽 create table range_part_tab (id number,deal_date date,area_code number,con