表单验证
==================================表单验证========================================
表单验证可以在客户端和服务器端
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>
