表單驗證

時間 2019-11-17

標籤表單驗證欄目 HTML 简体版

原文原文鏈接

==================================表單驗證========================================
表單驗證能夠在客戶端和服務器端
   1.客戶端
       直接在已下載到本地的頁面中調用腳本進行驗證
       檢查用戶輸入的無效或錯誤數據
       檢查遺漏的必選項
   2.服務器端
       將頁面提交到服務器處理，服務器的另外一個包含表單的頁面先執行對錶單的驗證，而後再返回響應結果到客戶端
       缺點：每一次驗證都要通過服務器，時間長，增長服務器的負擔

實現步驟：
   1.獲取表單元素的值
   2.根據業務規則，使用JS中的一下方法對獲取的數據進行判斷
   3.表單有一個事件onsubmit,在提交表單前調用。在提交表單時觸發onsubmit事件，對獲取的數據進行驗證

驗證方式：
   1.String對象的屬性和方法
       a.屬性 length（包括空格）
       b.方法
           toLowerCase
           toUpperCase
           charAt(index)   返回指定位置的字符
           indexOf(字符串，index)   返回字符串的位置
           substring(index1,index2)   包括index1，不包括index2
==================================正則表達式========================================
   2.正則表達式
       /.../   一個模塊的開始和結束
       ^   匹配字符串的開始
       $   匹配字符串的開始
       \s   任何空白字符
       \S   任何非空白字符
       \d   [0-9]
       \D   除[0-9]外
       \w   [A-Za-z0-9]
       .   除換行符以外的任意字符

       {n}       匹配前一項n次
       {n,}   匹配前一項n次，或屢次
       {n,m}   匹配前一項n~m次
       *       {0，}
       +       {1，}
       ?       前一項可選，{0,1}

1.普通方式
   var reg = /表達式/附加參數
   附加參數：（複合，不加參數）
       g：全局匹配
       i：不區分大小寫匹配
       m：多行匹配
2.構造函數方式
   var reg = new RegExp(表達式，附加參數);
【注意：表達式是正則表達式，能夠省略附加參數。】

JS除了支持RegExp對象的正則表達式外，還支持String對象的正則表達式
   String對象的方法
       match()       返回指定的值
       search()   返回第一個匹配的位置，若是沒有，就返回-1
       replace()   字符串對象.replace(RegExp對象或字符串，"替換的字符串")   若是沒設置全文搜索，就替換第一個
       split()       字符串對象.split(分隔符，n)       若是不設置n，就返回全部的元素數組

範例：表單的事件觸發javascript

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style>
 7         .error {
 8             border: 3px solid red;
 9         }
10     </style>
11 </head>
12 <body>
13     <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
14     <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script>
15     <form >
16         <div>
17             <label for="name">用戶名：</label>
18             <input type="text" name="name" id="name" regExp="^\w{6,12}$" errorMsg="用戶名不能爲空，而且長度..." placeholder="QQ郵箱/手機號" /><span></span>
19         </div>
20         <div>
21             <label for="passWord">密碼：</label>
22             <input type="password" name="passWord" id="passWord"  regExp="^\w{6,12}$" errorMsg="密碼不能爲空，而且長度..." placeholder="請輸入密碼" /><span></span>
23         </div>
24         <div>
25             <input type="button" value="提交" />
26         </div>
27     </form>
28     <script type="text/javascript">
29         $(function(){
30             $(':input[regExp][errorMsg]').on('valid',function(){
31                 var regExp = new RegExp($(this).attr('regExp'));
32                 var errorMsg = $(this).attr('errorMsg');
33                 var result = $(this).val().match(regExp);
34                 console.log(result);
35                 if (null == result) {
36                     $(this).addClass('error');
37                     $(this).next().html(errorMsg);
38                 } else {
39                     $(this).removeClass('error');
40                     $(this).next().html('');
41                 }
42             });
43 
44             $('input[type="button"]').click(function() {
45                 $(':input').trigger('valid');
46                 if($(this).closest('form').find('.error').length == 0){
47                     $('form').submit();
48                 }
49             });
50         });
51     </script>
52 </body>
53 </html>

範例：css

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title></title>
  6     <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
  7     <link rel="stylesheet" type="text/css" href="bootstrap/select2-4.0.2-dist/css/select2.min.css">
  8     <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
  9     <script type="text/javascript" src="bootstrap/jquery-2.2.4.js"></script>
 10     <script type="text/javascript" src="bootstrap/select2-4.0.2-dist/js/select2.full.min.js"></script>
 11     <style type="text/css">
 12         .error {
 13             border: 3px solid red;
 14         }
 15     </style>
 16 </head>
 17 <body>
 18     <h1 class="text-center">註冊</h1>
 19     <form class="form-horizontal" role="form">
 20         <div class="form-group">
 21             <label for="firstname" class="col-sm-2 control-label">用戶名</label>
 22             <div class="col-sm-10">
 23                 <input type="text" class="form-control" id="firstname" regExp="^\w{6,12}$" errorMsg="用戶名不能爲空，而且長度6到12位" 
 24                 placeholder="QQ/郵箱/手機號" autocomplete="off"><span></span>
 25             </div>
 26         </div>
 27         <div class="form-group">
 28             <label for="password" class="col-sm-2 control-label">密碼</label>
 29             <div class="col-sm-10">
 30                 <input type="password" class="form-control" id="password" regExp="^\w{6,12}$" errorMsg="密碼不能爲空，而且長度6到12位"
 31                 placeholder="請輸入密碼" autocomplete="off"><span></span>
 32             </div>
 33         </div>
 34         <div class="form-group">
 35             <label for="repassword" class="col-sm-2 control-label">確認密碼</label>
 36             <div class="col-sm-10">
 37                 <input type="password" class="form-control" id="repassword" regExp="^\w{6,12}$" errorMsg="密碼不能爲空，而且長度6到12位"
 38                 placeholder="請確認密碼" autocomplete="off"><span></span>
 39             </div>
 40         </div>
 41         <div class="form-group">
 42             <label for="sex" class="col-sm-2 control-label">性別</label>
 43             <div class="col-sm-10">
 44                    <label class="checkbox-inline">
 45                       <input type="checkbox" name="sex" value="male" checked="checked"> 男
 46                 </label>
 47                 <label class="checkbox-inline">
 48                       <input type="checkbox" name="sex" value="female"> 女
 49                 </label>
 50            </div>
 51         </div>
 52         <div class="form-group">
 53             <label for="age" class="col-sm-2 control-label">出生年月</label>
 54              <div class="col-sm-5">
 55                 <select class="form-control">
 56                       <option selected="selected">-年份-</option>
 57                     <option>1989</option>
 58                     <option>1990</option>
 59                     <option>1991</option>
 60                     <option>1992</option>
 61                     <option>1993</option>
 62                     <option>1994</option>
 63                     <option>1995</option>
 64                 </select>
 65               </div>
 66               <div class="col-sm-5">
 67                   <select class="form-control">
 68                       <option selected="selected">-月份-</option>
 69                     <option>1</option>
 70                     <option>2</option>
 71                     <option>3</option>
 72                     <option>4</option>
 73                     <option>5</option>
 74                     <option>6</option>
 75                     <option>7</option>
 76                 </select>
 77               </div>
 78         </div>
 79         <div class="form-group">
 80             <label for="where" class="col-sm-2 control-label">省份</label>
 81              <div class="col-sm-10">
 82                 <select class="form-control">
 83                       <option selected="selected">-請選擇-</option>
 84                     <option>黑龍江</option>
 85                     <option>江西</option>
 86                     <option>四川</option>
 87                     <option>江蘇</option>
 88                     <option>安徽</option>
 89                     <option>廣東</option>
 90                     <option>湖南</option>
 91                 </select>
 92               </div>
 93         </div>
 94         <div class="form-group">
 95             <label for="readme"class="col-sm-2 control-label">請閱讀如下協議</label>
 96             <textarea class="form-control col-sm-offset-2 col-sm-10" rows="3" ></textarea>
 97         </div>
 98         <div class="form-group">
 99             <div class="col-sm-offset-2 col-sm-10">
100             <div class="checkbox">
101                 <label>
102                     <input type="checkbox"> 我已經閱讀協議
103                 </label>
104             </div>
105             </div>
106         </div>
107         <div class="form-group">
108             <div class="col-sm-offset-2 col-sm-10">
109             <div class="checkbox">
110                 <label>
111                     <input type="checkbox"> 請記住我
112                 </label>
113             </div>
114             </div>
115         </div>
116         <div class="form-group">
117             <div class="col-sm-offset-2 col-sm-10">
118                 <button type="submit" class="btn btn-primary col-sm-4">註冊</button>
119                 <button type="reset"  class="btn btn-primary col-sm-offset-2 col-sm-4">重置</button>
120             </div>
121         </div>
122     </form>
123 
124     <script type="text/javascript">
125         $(function(){
126             $(':input[regExp][errorMsg]').on('valid',function(){
127                 var regExp = new RegExp($(this).attr('regExp'));
128                 var errorMsg = $(this).attr('errorMsg');
129                 var result = $(this).val().match(regExp);
130                 console.log(result);
131                 if (null == result) {
132                     $(this).addClass('error');
133                     $(this).next().html(errorMsg);
134                 } else {
135                     $(this).removeClass('error');
136                     $(this).next().html('');
137                 }
138             });
139 
140             $('button[type="submit"]').click(function() {
141                 $(':input').trigger('valid');
142                 if($(this).closest('form').find('.error').length == 0){
143                     $('form').submit();
144                 }
145             });
146         });
147     </script>
148 </body>
149 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。