表单验证

==================================表单验证========================================
表单验证可以在客户端和服务器端
   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，就返回所有的元素数组

范例：表单的事件触发

 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>

范例：

  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>