html form表單驗證和使用者體驗程式碼

阿新 • • 發佈：2018-12-11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改善使用者體驗的表單</title>
    <style>
        #pwdLvSpan{display: inline-block;
                    width:100px;
                    height: 5px;
                    background: #c3c3c3 
;
        }
        #pwdLvSpan i{
            display: block;
            background: green;
            height:5px;
            width:0;
        }
    </style>
</head>
<body>
    <form method="post" action="/test/" onsubmit="return eg.regCheck();">
        <input type="hidden" 
 name="" id="errnum" value="0"/>
        賬戶：<input type="text" name="" id="userid" /><br/><br/>
        密碼：<input type="password" name="" id="userpwd" />
        密碼強度<span id="pwdLvSpan"><i id="pwdLv"></i></span><br/><br/>
        確認: <input type 
="password" name="" id="userpwd2" /><br/><br/>
        性別：<input type="radio" name="sex" value="1"  checked="checked"/>
        男<input type="radio" name="sex" value="0" />女<br/><br/>
        年齡：<select name="" id="age">
                <option value="0" selected="selected">請選擇年齡段</option>
                <option value="1">18歲以下</option>
                <option value="2">18-24歲</option>
                <option value="3">24-30歲</option>
                <option value="4">30-35歲</option>
                <option value="5">35歲以上</option>
        </select><br/><br/>
        愛好：<input type="checkbox" name="like" value="1" class="like" />
        上網<input type="checkbox" name="like" value="2" class="like">
        逛街<input type="checkbox" name="like" value="3" class="like">
        看電影<input type="checkbox" name="like" value="4" class="like">其他<br/><br/>
        簡介：<textarea name="" rows="4" cols="18" id="about"></textarea><br/><br/>
        郵箱: <input type="text" name="" id="email" /> <br/><br/>
        <input type="submit" value="註冊" id="regBtn">
        <input type="button" value="解鎖" onclick="eg.unlock();" style="display: none;" id="regUnlock" />
    </form>
</body>
<script>
    // 表單驗證
    var eg = {};
    // 申明一個物件當作名稱空間使用
    // 定義一個公共函式獲取id元素 減少程式碼量 提高複用率
    eg.$ = function (id) {
        return document.getElementById(id);
    };
    // 定義一個公共函式來獲取制定class的名稱元素集合，能相容各瀏覽器
    eg.getElementsByClassName = function (className, element) {
      if (document.getElementsByClassName){
          return (element || document).getElementsByClassName(className)
      }
      var children = (element || document).getElementsByTagName('*');
      var elements = [];
      for (var i =0; i <children.length; i++){
          var child = children[i];
          var classNames = child.className.split(' ');
          for (var j=0; j < classNames.length; j++){
              if (classNames[j] == className){
                  elements.push(child);
                  break;
              }
          }
      }
      return elements;
    };
    // 定義一個公共函式解決監聽事件相容問題
    eg.addListener = function (target, type, handler) {
      if (target.addEventListener){
          target.addEventListener(type, handler, false);
      }else if (target.attachEvent) {
          target.attachEvent("on" + type, handler);
      }else{
          target["on" + type] = handler;
      }



    };
    // 主要驗證方法
    eg.regCheck = function () {
        var uid = eg.$("userid");
        var upwd = eg.$("userid");
        var upwd2 = eg.$("userpwd2");
        if (uid.value == ''){
            alert("賬戶不能為空");
            uid.focus();
            eg.err();
            return false;
        }
        if (upwd.value == ''){
            alert("密碼不能為空");
            upwd.focus();
            eg.err();
            return false;
        }
        if (upwd2.value == ''){
            alert("兩次密碼輸入不同");
            upwd2.focus();
            eg.err();
            return false;
        }
        // 簡介長度
        var about = eg.$("about");
        if (about.value.length>60){
            alert("簡介太長！");
            about.focus();
            eg.err();
            return false;
        }
        // 選擇年齡段
        var age =eg.$("age");
        if(age.value == "0"){
            alert("請選擇年齡段！");
            age.focus(); //讓輸入框獲得焦點
            eg.err();
            return false;
        }

        var likes = eg.getElementsByClassName("like");
        var likeNum = 0;
        for (var n=0;n<likes.length;n++){
            console.log(likes[n].checked);
            if (likes[n].checked){
                likeNum++;
            }
        }
        if(likeNum==0){
            alert("請至少選擇一個愛好！");
            eg.err();
            return false
        }
        // 郵箱驗證
        var email = eg.$("email");
        if(!/^[A-Za-z\d]+[A-Za-z\d\-_\.]*@([A-Za-z\d]+[A-Za-z\d]\-]*\.)+[A-Za-z]{2,4}$/.test(email.value)){
            alert("請輸入正確的郵箱!");
            email.focus();
            eg.err();
            return false;
        }
        return true;
    };
    //新增一些互動事件
    eg.addEvent = function () {
        var pwd = eg.$("userpwd");
        eg.addListener(pwd, "keyup", function () {
            var lv = 0;
            if (/^\d{4,}$/.test(pwd.value)) {
                lv = 10;
            } else if (/^\w{4,}$/.test(pwd.value)) {
                lv = 25;
            } else if (/^\d\w{4,}$/.test(pwd.value)) {
                lv = 50;
            } else if (/^[\d\[email protected]#$%\^&*\(\)\-{}\[\]=<>,\.\?\/]{4,}$/.test(pwd.value)) {
                lv = 100;
            } else if (pwd.value.length < 6 && pwd.value.length > 3) {
                lv = 60;
            }
            eg.$("pwdLv").style.width = lv + "px";
        });
    };
        eg.addEvent();




    // 出錯時記錄錯誤次數
    eg.err = function () {
        var el = eg.$("errnum");
        var old = el.value;
        el.value = parseInt(old)+1;
        eg.lock();

    };
    eg.lock = function () {
        var err = eg.$("errnum");
        if (parseInt(err.value) >2 ){
            eg.$("regBtn").disabled =true;
            eg.$("regUnlock").style.display="block";
        }
    };
    // 解鎖
    eg.unlock = function () {
        eg.$("regBtn").disabled = false;
        eg.$("regUnlock").style.display = "none";

    }
</script>
</html>

html form表單驗證和使用者體驗程式碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>改善使用者體驗的表單</title> <style

html form表單提交前驗證

可以使用form表單的onsubmit方法，在提交表單之前，對錶單或者網頁中的資料進行檢驗。 onsubmit指定的方法返回true，則提交資料；返回false不提交資料。 <HTML> <head> <meta htt

HTML form 表單提交方式get和post的區別

method屬性規定如何傳送表單的資料。有兩種提交的方法分別為get和post。 1、get：提交的資料量要小於1024位元組，表單提交時表單域數值（表單請求的資訊：賬號、密碼…）將在位址列顯示。

html form表單提交action和url跳轉到action有什麼區別.

form表單的action 與url跳轉是不一樣的： form表單可以給後臺傳遞資料，在後臺直接可以用request物件去向前臺請求資料。 form表單傳遞資料有兩種方式： method="post":這是傳遞大量資料時用的，在資料傳遞之前會先將資料打包，因此這種傳遞資料

JavaScript表單驗證和正則表達式

sco 集合 innertext ner rep tell 一次臨時軟件 JavaScript表單驗證分為四類：　　1.非空驗證　　　　常用於用戶名等　　2.相等驗證　　　　常用於驗證兩次輸入的密碼　　3.範圍驗證　　　　常用於年齡等　　

django form表單驗證

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

django 表單驗證和字段驗證

pan 強制轉換 pre com amp 類型 always his ria 表單驗證和字段驗證表單驗證發生在數據驗證之後。如果你需要自定義這個過程，有幾個不同的地方可以修改，每個地方的目的不一樣。表單處理過程中要運行三種類別的驗證方法。它們通常在你調用表單的is_v

HTML--JS 表單驗證

als pre tex colspan adding pattern -- lpad enter 1 <html> 2 <head> 3 <title>驗證表單</title> 4

Django中的Form表單驗證

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

HTML——form表單中常用標簽總結

radio led ext only pin sta word htm and 1 <form action="" method="get"> 2 <!-- 3 placeholder="請輸

django form 表單驗證

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

html--form表單常用操作

form表單用於收集使用者資訊，如：登入、註冊等場景；所有要提交的資料都必須放在form標籤中<form action=" " method=" "> 　　action：提交地址、動作，與input標籤中typy標籤的submit屬性相關聯。 <inp

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提交

html的表單標籤和框架標籤

目錄表單標籤框架標籤其他標籤表單標籤表單是html中重要的一部分 <form></form>表單標籤,用於蒐集不同型別的使用者輸入,比如註冊資訊,購物資訊等 name:表單的名稱 &n

angualrjs 簡單的form表單驗證

下面舉一個簡單的例子：提交表單時驗證，input為必填項 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <t

HTML form表單中action的正確寫法

mapping oca http context java ica 現在 ont ext 　　我的Java Web Application的context是myweb，即http://localhost:8080/myweb/index.jsp是歡迎頁。　　現在我的一個C

趴一趴如何用最簡單的方式從html form表單中獲取到資料

最近網速一直不太好 ~~~不開心本文采用的是最簡單的方式，僅供自己試驗，畢竟存在一些不安全因素。看了其他好的的方式發現都太麻煩，所以自己總結下。是這樣的：input.html頁面中有一段程式碼。

element-ui Form表單驗證規則全解

element的form表單非常好用,自帶了驗證規則,用起來很方便,官網給的案例對於一些普通場景完全沒問題,不過一些複雜場景的驗證還得自己多看文件摸索,自己經過數次爬坑之後,總結了幾種form表單的驗證規則,為了便於閱讀,驗證規則是拆分的,完整的程式碼放在文末

【SpringBoot】表單驗證和使用AOP處理請求

表單驗證專案是上篇文章繼續的。首先說下要幹嘛，我們需要攔截People年齡在18歲以下的首先是在People上的年齡增加一個註解 @Min(value = 18,message = "年齡必須大於18")//message為提示

html form表單驗證和使用者體驗程式碼

相關推薦