前端开发补充之 - 正则和插件

前端开发补充之-正则和插件
1: JS正则表达式（常用于表单）

定义正则表达式
/.../ 用于定义正则表达式
/.../g 全局匹配
/.../i 不区分大小写
/.../m 多行匹配
多行匹配：
默认就是多行匹配
使用^$进行多行匹配时候使用m。

只具有2个方法
方法1：test - 判断字符串是否符合规定的正则

rep = /\d+/; 创建了正则表达式匹配数字
rep.test('asdfesf89sdf') #包含数字即返回true
输出：true
rep = /^\d+$/; 开头到结尾均为数字
以上实例输出返回：false

方法2：exec - 获取匹配的数据
实例1：
rep = /\d+/;
str = 'w_67_h_20'
rep.exec(str)
始终输出第一个数组：["67"]
实例2：
test = 'JavaScript is more fun than Java or JavaBeans!'
var pattern = /\bJava(\w*)\b/;#不用分组只输出头一个值，使用分组输出头一组数据。
pattern.exec(test)
分组的输出：['JavaScript','Script']
var pattern = /\bJava\w*\b/g #使用g是全局匹配，输出类似迭代器，匹配完成后输出null，如果继续将会再次重新匹配
未分组输出：第一个["JavaScript"]，第二个['Java']，第三个['JavaBeans'] 第四个输出null
var pattern = /\bJava(\w*)\b/g #使用分组
分组的输出：第一个["JavaScript","Script"]，第二个['Java',""]，第三个['JavaBeans',"Beans"] 第四个输出null

默认事件先执行：checkbox # 当点击时候，先打对勾，然后才输出自定义的查看状态true或者false
自定义先执行
a #先执行自定义的函数，然后才进行URi的跳转
submit

表单验证：是为了减少数据库的请求，当然，如果游览器关闭的jsscript功能，最后还是的通过数据库进行验证。

举例：js表单验证写法有以下几种，如下:

 1 flag = true;
 2 $(form).find(':text,:password').each(function(){
 3     var name = $(this).attr('name')
 4     var label = $(this).attr('label')
 5     var val = $(this).val()
 6     var $parent = $(this).parent()
 7     var required = $(this).attr('require')
 8     if(required){  # 如果为真，则必填
 9         if(!val||val.trim() == ''){
10             flag = false;
11             ErrorMessage($parent,label+'不能为空')
12             return false;
13         }
14     }
15     var number = $(this).attr('number')
16     if(number){
17         if(!$.isNumeric(number)){
18             flag = false;
19             ErrorMessage($parent,label+'必须为数字');
20             return false;
21         }
22     }
23     var mobile = $(this).attr('mobile')
24     if(mobile){
25         var reg = /^1[3|5|8]\d{9}$/;
26         if(!reg.test(val)){
27             flag = false;
28             ErrorMessage($parent,label+'格式错误');
29             return false;
30         }
31     }
32 })
View Code

 

2：前端插件模板
插件有很多，如：bootstrap,JqueryUI,EasyUI,bxslider

bootstrap （目前主流的模板，前台和后台通用），文件下载地址：v3.bootcss.com，包含：
- css 放置的是样式。
引入：<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css" /> 这个是加入了一些颜色
- fonts 放置的是bootstraps图标，直接从v3.bootcss.com组件中审查元素查找代码，然后直接复制到页面内即可
- js 放置的js文件，引入：<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
注意：当使用插件时候，如果要修改一个样式，css绝对生效在样式后加：!important;
包含：
1：响应式： @media
2：图标，字体： @font-face 根据代码找到图标，直接从网站的元素审查里copy相应代码
3：基本的使用
实例：bootstrap实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .no-radus{
 8             /*使用!important 优先级最高*/
 9             border-radius: 0 !important;
10         }
11     </style>
12   <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
13     <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css" />
14 
15 </head>
16 <body style="background-color:red">
17 <nav class="navbar navbar-default no-radus">
18   <div class="container-fluid">
19     <!-- Brand and toggle get grouped for better mobile display -->
20     <div class="navbar-header">
21       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
22         <span class="sr-only">Toggle navigation</span>
23         <span class="icon-bar"></span>
24         <span class="icon-bar"></span>
25         <span class="icon-bar"></span>
26       </button>
27       <a class="navbar-brand" href="#">Brand</a>
28     </div>
29 
30     <!-- Collect the nav links, forms, and other content for toggling -->
31     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
32       <ul class="nav navbar-nav">
33         <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
34         <li><a href="#">Link</a></li>
35         <li class="dropdown">
36           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
37           <ul class="dropdown-menu">
38             <li><a href="#">Action</a></li>
39             <li><a href="#">Another action</a></li>
40             <li><a href="#">Something else here</a></li>
41             <li role="separator" class="divider"></li>
42             <li><a href="#">Separated link</a></li>
43             <li role="separator" class="divider"></li>
44             <li><a href="#">One more separated link</a></li>
45           </ul>
46         </li>
47       </ul>
48       <form class="navbar-form navbar-left">
49         <div class="form-group">
50           <input type="text" class="form-control" placeholder="Search">
51         </div>
52         <button type="submit" class="btn btn-default">Submit</button>
53       </form>
54       <ul class="nav navbar-nav navbar-right">
55         <li><a href="#">Link</a></li>
56         <li class="dropdown">
57           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
58           <ul class="dropdown-menu">
59             <li><a href="#">Action</a></li>
60             <li><a href="#">Another action</a></li>
61             <li><a href="#">Something else here</a></li>
62             <li role="separator" class="divider"></li>
63             <li><a href="#">Separated link</a></li>
64           </ul>
65         </li>
66       </ul>
67     </div><!-- /.navbar-collapse -->
68   </div><!-- /.container-fluid -->
69 </nav>
70 
71 
72 bootstrap图标
73 <span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
74 
75 <!-- Single button -->
76 <div class="btn-group">
77   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
78     Action <span class="caret"></span>
79   </button>
80   <ul class="dropdown-menu">
81     <li><a href="#">Action</a></li>
82     <li><a href="#">Another action</a></li>
83     <li><a href="#">Something else here</a></li>
84     <li role="separator" class="divider"></li>
85     <li><a href="#">Separated link</a></li>
86   </ul>
87 </div>
88 
89     <script src="jquery-1.12.4.min.js"></script>
90     <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
91 </body>
92 </html>
View Code

注意：bootstrap的js 依赖于jquery，所以使用前需要先倒入jquery

JqueryUI，需要下载jqueryUi的包，（趋向后台管理），基本过时。
EasyUI，需要下载包（趋向后台管理），基本过时。
bxslider 也是一个插件。以下实现一个轮播图
网站：http://bxslider.com/ 下载包文件
轮播图实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- jQuery library (served from Google) -->
<script src="../jquery-1.12.4.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="bxslider/jquery.bxslider.css" rel="stylesheet" />
</head>
<body>
<ul class="bxslider">
  <li><img src="1.jpg" /></li>
  <li><img src="2.jpg" /></li>
  <li><img src="3.png" /></li>
  <li><img src="4.jpg" /></li>
</ul>
<script>
        $(document).ready(function(){
        $('.bxslider').bxSlider();
        });
</script>
</body>
</html>
View Code

经验：写前端时候，有插件最好用插件，可以增加效率。

 

posted @ 2017-08-29 17:55  十年如一..bj  阅读(375)  评论(0)  编辑  收藏  举报