标签：
==================================表单验证========================================
表单验证可以在客户端和服务器端
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>
标签：
原文地址：http://www.cnblogs.com/ivy-xu/p/5559354.html
