├── CSS相关
├── 前端常用的CSS代码块.md
└── 常见的CSS文字居中显示.md
├── JS相关
├── 前端常用rule校验.js
└── 前端常用正则表达式.js
└── README.md
/CSS相关/前端常用的CSS代码块.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | [demo预览地址](https://web.lieme.cn/cssDemo/cssdemo.html)
4 |
5 | ## 1、垂直居中对齐
6 |
7 | ```
8 | .vc {
9 | position: absolute;
10 | top: 50%;
11 | left: 50%;
12 | transform: translate(-50%, -50%);
13 | }
14 | .vc {
15 | position:absolute;
16 | top: 50%;
17 | left: 50%;
18 | width: 100px;
19 | height: 100px;
20 | margin:-50px 0 -50px;
21 | }
22 | ```
23 |
24 | ## 2、全屏显示
25 | ```
26 | html,
27 | body {
28 | position: fixed;
29 | width: 100%;
30 | height: 100%;
31 | }
32 | div {
33 | height: 100%;
34 | }
35 | ```
36 | ## 3、不同a标签链接使用不同样式
37 |
38 | ```
39 | // link
40 |
41 | a[href^="http://"]{
42 | background: url(link.gif) no-repeat center right;
43 | }
44 | // emails
45 | a[href^="mailto:"]{
46 | background: url(email.png) no-repeat center right;
47 | }
48 |
49 | // pdfs
50 |
51 | a[href$=".pdf"]{
52 | background: url(pdf.png) no-repeat center right;
53 | }
54 | ```
55 | ## 4、图像灰度
56 |
57 | ```
58 | img {
59 | filter: gray;
60 | -webkit-filter: grayscale(1);
61 | }
62 | ```
63 | ## 5、背景渐变动画
64 |
65 | ```
66 | bg {
67 | background-image: linear-gradient(#5187c4, #1c2f45);
68 | background-size: auto 200%;
69 | background-position: 0 100%;
70 | transition: background-position 0.5s;
71 | }
72 | bg:hover {
73 | background-position: 0 0;
74 | }
75 | ```
76 | ## 6、长文本自动换行
77 |
78 | ```
79 | pre {
80 | white-space: pre-line;
81 | word-wrap: break-word;
82 | }
83 | ```
84 | ## 7、模糊文本
85 | ```
86 | .text {
87 | filter: blur(1px);
88 | }
89 | ```
90 | ## 8、用CSS动画实现省略号动画
91 | ```
92 | .point:after {
93 | overflow: hidden;
94 | display: inline-block;
95 | vertical-align: bottom;
96 | animation: ellipsis 2s infinite;
97 | content: "\2026";
98 | }
99 | @keyframes ellipsis {
100 | from {
101 | width: 2px;
102 | }
103 | to {
104 | width: 15px;
105 | }
106 | }
107 | ```
108 | ## 9、样式重置
109 | ```
110 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
111 | margin: 0;
112 | padding: 0;
113 | border: 0;
114 | font-size: 100%;
115 | font: inherit;
116 | vertical-align: baseline;
117 | outline: none;
118 | -webkit-box-sizing: border-box;
119 | -moz-box-sizing: border-box;
120 | box-sizing: border-box;
121 | }
122 | html { height: 101%; }
123 | body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
124 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
125 | ol, ul { list-style: none; }
126 | blockquote, q { quotes: none; }
127 | blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
128 | strong { font-weight: bold; }
129 | table { border-collapse: collapse; border-spacing: 0; }
130 | img { border: 0; max-width: 100%; }
131 | p { font-size: 1.2em; line-height: 1.0em; color: #333; }
132 | ```
133 |
134 | ## 10、清除浮动
135 | ```
136 | .clearfix:before, .container:after { content: ""; display: table; }
137 | .clearfix:after { clear: both; }
138 | .clearfix { zoom: 1; }
139 | ```
140 | ## 11、css元素透明
141 | ```
142 | .transparent {
143 | filter: alpha(opacity=50);
144 | -khtml-opacity: 0.5;
145 | -moz-opacity: 0.5;
146 | opacity: 0.5;
147 | }
148 | ```
149 | ## 12、CSS引用样式
150 | ```
151 | blockquote {
152 | background: #f9f9f9;
153 | border-left: 10px solid #ccc;
154 | margin: 1.5em 10px;
155 | padding: .5em 10px;
156 | quotes: "\201C""\201D""\2018""\2019";
157 | }
158 | blockquote:before {
159 | color: #ccc;
160 | content: open-quote;
161 | font-size: 4em;
162 | line-height: .1em;
163 | margin-right: .25em;
164 | vertical-align: -.4em;
165 | }
166 | blockquote p {
167 | display: inline;
168 | }
169 | ```
170 | ## 13、个性圆角
171 | ```
172 | .borderRadius {
173 | border-radius: 4px 3px 6px 10px;
174 | }
175 | .borderRadius {
176 | border-top-left-radius: 4px;
177 | border-top-right-radius: 3px;
178 | border-bottom-right-radius: 6px;
179 | border-bottom-left-radius: 10px;
180 | }
181 | ```
182 |
183 | ## 14、通用媒体查询
184 | ```
185 |
186 | @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
187 | /* Styles */
188 | }
189 | @media only screen and (min-width : 321px) {
190 | /* Styles */
191 | }
192 | @media only screen and (max-width : 320px) {
193 | /* Styles */
194 | }
195 | /* iPad */
196 | @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
197 | /* Styles */
198 | }
199 | @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
200 | /* Styles */
201 | }
202 |
203 | @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
204 | /* Styles */
205 | }
206 | /* 桌面 */
207 | @media only screen and (min-width : 1224px) {
208 | /* Styles */
209 | }
210 |
211 | @media only screen and (min-width : 1824px) {
212 | /* Styles */
213 | }
214 |
215 | @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
216 | /* Styles */
217 | }
218 | ```
219 | ## 15、自定义文本选择
220 | ```
221 | ::selection { background: #e2eae2; }
222 | ```
223 |
224 | ## 16、图片边框偏光
225 | ```
226 | img.polaroid {
227 | background:#000;
228 | border:solid #fff;
229 | border-width:6px 6px 20px 6px;
230 | box-shadow:1px 1px 5px #333;
231 | -webkit-box-shadow:1px 1px 5px #333;
232 | -moz-box-shadow:1px 1px 5px #333;
233 | height:200px;
234 | width:200px;
235 | }
236 | ```
237 | ## 17、锚链接伪类
238 | ```
239 | a:link { color: blue; }
240 | a:visited { color: purple; }
241 | a:hover { color: red; }
242 | a:active { color: yellow; }
243 | ```
244 |
245 | ## 18、全屏背景图
246 | ```
247 | html {
248 | background: url('bg.jpg') no-repeat center center fixed;
249 | background-size: cover;
250 | }
251 | ```
252 | ## 19、内容垂直居中
253 | ```
254 | .center {
255 | min-height: 6.5em;
256 | display: table-cell;
257 | vertical-align: middle;
258 | }
259 | ```
260 | ## 20、强制出现垂直滚动条
261 |
262 | ```
263 | html { height: 101% }
264 | ```
265 |
266 | ## 21、CSS3渐变模板
267 | ```
268 | .bg {
269 | background: #629721;
270 | background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
271 | background-image: linear-gradient(top, #83b842, #629721);
272 | }
273 | ```
274 | ## 22、@font-face引用
275 |
276 | ```
277 | @font-face {
278 | font-family: 'MyWebFont';
279 | src: url('webfont.eot');
280 | src: url('webfont.eot?#iefix')
281 | url('webfont.woff') format('woff'),
282 | url('webfont.ttf') format('truetype'),
283 | url('webfont.svg#svgFontName') format('svg');
284 | }
285 | body {
286 | font-family: 'MyWebFont', Arial, sans-serif;
287 | }
288 | ```
289 |
290 | ## 23、连接CSS3元素
291 | ```
292 | p {
293 | position:relative;
294 | z-index:1;
295 | padding: 10px;
296 | margin: 10px;
297 | font-size: 21px;
298 | line-height: 1.3em;
299 | color: #fff;
300 | background: #ff0030;
301 | box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
302 | -webkit-border-radius: 3px;
303 | -moz-border-radius: 3px;
304 | border-radius: 3px;
305 | }
306 | p:before {
307 | content: "";
308 | position: absolute;
309 | z-index: -1;
310 | top: 3px;
311 | bottom: 3px;
312 | left :3px;
313 | right: 3px;
314 | border: 2px dashed #fff;
315 | }
316 | p a {
317 | color: #fff;
318 | text-decoration:none;
319 | }
320 | p a:hover, p a:focus, p a:active {
321 | text-decoration:underline;
322 | }
323 | ```
324 | ## 24、CSS斑马线
325 | ```
326 | tbody tr:nth-child(odd) {
327 | background-color: #ccc;
328 | }
329 | ```
330 | ## 25、 css&符号
331 | ```
332 | .amp {
333 | font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
334 | font-style: italic;
335 | font-weight: normal;
336 | }
337 | ```
338 | ## 26、内盒阴影
339 | ```
340 | .div {
341 | box-shadow: inset 2px 0 4px #000;
342 | }
343 | ```
344 | ## 27、外盒阴影
345 | ```
346 | .div {
347 | box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
348 | }
349 | ```
350 | ## 28、三角形列表项目符号
351 | ```
352 | ul {
353 | margin: 0.75em 0;
354 | padding: 0 1em;
355 | list-style: none;
356 | }
357 | li:before {
358 | content: "";
359 | border-color: transparent #111;
360 | border-style: solid;
361 | border-width: 0.35em 0 0.35em 0.45em;
362 | display: block;
363 | height: 0;
364 | width: 0;
365 | left: -1em;
366 | top: 0.9em;
367 | position: relative;
368 | }
369 | ```
370 | ## 29、固定宽度的居中布局
371 | ```
372 | .div {
373 | width: 800px;
374 | margin: 0 auto;
375 | }
376 | ```
377 | ## 30、CSS3列文本
378 | ```
379 | .columnsText {
380 | text-align: justify;
381 | -webkit-column-count: 3;
382 | -webkit-column-gap: 12px;
383 | -webkit-column-rule: 1px solid #c4c8cc;
384 | }
385 | ```
386 | ## 31、CSS固定页脚
387 | ```
388 | footer {
389 | position: fixed;
390 | left: 0px;
391 | bottom: 0px;
392 | height: 30px;
393 | width: 100%;
394 | background: #444;
395 | }
396 | ```
397 | ## 32、设置浏览器最小高度
398 | ```
399 | .div{
400 | min-height: 550px;
401 | height: auto !important;
402 | height: 550px;
403 | }
404 | ```
405 | ## 33、CSS3输入效果
406 | ```
407 | input[type=text] {
408 | transition: all 0.30s ease-in-out;
409 | outline: none;
410 | padding: 3px 0px 3px 3px;
411 | margin: 5px 1px 3px 0px;
412 | border: 1px solid #ddd;
413 | }
414 | input[type=text]:focus {
415 | box-shadow: 0 0 5px rgba(81, 203, 238, 1);
416 | padding: 3px 0px 3px 3px;
417 | margin: 5px 1px 3px 0px;
418 | border: 1px solid rgba(81, 203, 238, 1);
419 | }
420 | ```
421 | ## 34、强制换行
422 | ```
423 | pre {
424 | white-space: pre-wrap;
425 | word-wrap: break-word;
426 | }
427 | ```
428 |
429 | ## 35、在可点击的项目上强制手型
430 | ```
431 | .pointer {
432 | cursor: pointer;
433 | }
434 | ```
435 | ## 36、网页顶部盒阴影
436 | ```
437 | body:before {
438 | content: "";
439 | position: fixed;
440 | top: -10px;
441 | left: 0;
442 | width: 100%;
443 | height: 10px;
444 | box-shadow: 0px 0px 10px rgba(0,0,0,.8);
445 | z-index: 100;
446 | }
447 | ```
448 | ## 37、CSS3对话气泡
449 | ```
450 | .line {
451 | background-color: #ededed;
452 | border: 2px solid #666;
453 | font-size: 35px;
454 | line-height: 1.3em;
455 | margin: 10px auto;
456 | padding: 10px;
457 | position: relative;
458 | text-align: center;
459 | width: 300px;
460 | border-radius: 20px;
461 | box-shadow: 0 0 5px #888;
462 | }
463 | .chat-bubble-arrow-border {
464 | border-color: #666 transparent transparent transparent;
465 | border-style: solid;
466 | border-width: 20px;
467 | height: 0;
468 | width: 0;
469 | position: absolute;
470 | bottom: -42px;
471 | left: 30px;
472 | }
473 | .chat-bubble-arrow {
474 | border-color: #ededed transparent transparent transparent;
475 | border-style: solid;
476 | border-width: 20px;
477 | height: 0;
478 | width: 0;
479 | position: absolute;
480 | bottom: -39px;
481 | left: 30px;
482 | }
483 | ```
484 |
485 |
486 | ## 38、持久的列表排序
487 | ```
488 | ol.chapters {
489 | list-style: none;
490 | margin-left: 0;
491 | }
492 | ol.chapters > li:before {
493 | content: counter(chapter) ". ";
494 | counter-increment: chapter;
495 | font-weight: bold;
496 | float: left;
497 | width: 40px;
498 | }
499 | ol.chapters li {
500 | clear: left;
501 | }
502 | ol.start {
503 | counter-reset: chapter;
504 | }
505 | ol.continue {
506 | counter-reset: chapter 11;
507 | }
508 | ```
509 | ## 39、CSS悬浮提示文本
510 | ```
511 | a {
512 | border-bottom:1px solid #bbb;
513 | color:#666;
514 | display:inline-block;
515 | position:relative;
516 | text-decoration:none;
517 | }
518 | a:hover,
519 | a:focus {
520 | color:#36c;
521 | }
522 | a:active {
523 | top:1px;
524 | }
525 |
526 | a[data-tooltip]:after {
527 | border-top: 8px solid #222;
528 | border-top: 8px solid hsla(0,0%,0%,.85);
529 | border-left: 8px solid transparent;
530 | border-right: 8px solid transparent;
531 | content: "";
532 | display: none;
533 | height: 0;
534 | width: 0;
535 | left: 25%;
536 | position: absolute;
537 | }
538 | a[data-tooltip]:before {
539 | background: #222;
540 | background: hsla(0,0%,0%,.85);
541 | color: #f6f6f6;
542 | content: attr(data-tooltip);
543 | display: none;
544 | font-family: sans-serif;
545 | font-size: 14px;
546 | height: 32px;
547 | left: 0;
548 | line-height: 32px;
549 | padding: 0 15px;
550 | position: absolute;
551 | text-shadow: 0 1px 1px hsla(0,0%,0%,1);
552 | white-space: nowrap;
553 | -webkit-border-radius: 5px;
554 | -moz-border-radius: 5px;
555 | -o-border-radius: 5px;
556 | border-radius: 5px;
557 | }
558 | a[data-tooltip]:hover:after {
559 | display: block;
560 | top: -9px;
561 | }
562 | a[data-tooltip]:hover:before {
563 | display: block;
564 | top: -41px;
565 | }
566 | a[data-tooltip]:active:after {
567 | top: -10px;
568 | }
569 | a[data-tooltip]:active:before {
570 | top: -42px;
571 | }
572 | ```
573 | ## 40、深灰色的圆形按钮
574 | ```
575 | .graybtn {
576 | box-shadow:inset 0px 1px 0px 0px #ffffff;
577 | background:gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
578 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
579 | background-color:#ffffff;
580 | border-radius:6px;
581 | border:1px solid #dcdcdc;
582 | display:inline-block;
583 | color:#777777;
584 | font-family:arial;
585 | font-size:15px;
586 | font-weight:bold;
587 | padding:6px 24px;
588 | text-decoration:none;
589 | text-shadow:1px 1px 0px #ffffff;
590 | }
591 | .graybtn:hover {
592 | background:gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
593 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
594 | background-color:#d1d1d1;
595 | }
596 | .graybtn:active {
597 | position:relative;
598 | top:1px;
599 | }
600 | ```
601 | ## 41、显示a链接得URLs
602 | ```
603 | @media print {
604 | a:after {
605 | content: " [" attr(href) "] ";
606 | }
607 | }
608 | ```
609 | ## 42、禁用移动Webkit的选择高亮
610 | ```
611 | body {
612 | -webkit-touch-callout: none;
613 | -webkit-user-select: none;
614 | -khtml-user-select: none;
615 | -moz-user-select: none;
616 | -ms-user-select: none;
617 | user-select: none;
618 | }
619 | ```
620 | ## 43、CSS3 圆点图案
621 | ```
622 | body {
623 | background: radial-gradient(circle, white 10%, transparent 10%),
624 | radial-gradient(circle, white 10%, black 10%) 50px 50px;
625 | background-size: 100px 100px;
626 | }
627 | ```
628 | ## 44、CSS3 方格图案
629 | ```
630 | body {
631 | background-color: white;
632 | background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
633 | linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
634 | background-size: 100px 100px;
635 | background-position: 0 0, 50px 50px;
636 | }
637 | ```
638 |
639 | ## 45、CSS font属性缩写
640 | ```
641 | p {
642 | font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
643 | }
644 | ```
645 | ## 46、论文页面的卷曲效果
646 | ```
647 | ul.box {
648 | position: relative;
649 | z-index: 1;
650 | overflow: hidden;
651 | list-style: none;
652 | margin: 0;
653 | padding: 0;
654 | }
655 | ul.box li {
656 | position: relative;
657 | float: left;
658 | width: 250px;
659 | height: 150px;
660 | padding: 0;
661 | border: 1px solid #efefef;
662 | margin: 0 30px 30px 0;
663 | background: #fff;
664 | -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
665 | -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
666 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
667 | }
668 | ul.box li:before,
669 | ul.box li:after {
670 | content: '';
671 | z-index: -1;
672 | position: absolute;
673 | left: 10px;
674 | bottom: 10px;
675 | width: 70%;
676 | max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
677 | max-height: 100px;
678 | height: 55%;
679 | -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
680 | -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
681 | box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
682 | -webkit-transform: skew(-15deg) rotate(-6deg);
683 | -moz-transform: skew(-15deg) rotate(-6deg);
684 | -ms-transform: skew(-15deg) rotate(-6deg);
685 | -o-transform: skew(-15deg) rotate(-6deg);
686 | transform: skew(-15deg) rotate(-6deg);
687 | }
688 | ul.box li:after {
689 | left: auto;
690 | right: 10px;
691 | -webkit-transform: skew(15deg) rotate(6deg);
692 | -moz-transform: skew(15deg) rotate(6deg);
693 | -ms-transform: skew(15deg) rotate(6deg);
694 | -o-transform: skew(15deg) rotate(6deg);
695 | transform: skew(15deg) rotate(6deg);
696 | }
697 | ```
698 | ## 47、鲜艳的锚链接
699 | ```
700 | a {
701 | color: #00e;
702 | }
703 | a:visited {
704 | color: #551a8b;
705 | }
706 | a:hover {
707 | color: #06e;
708 | }
709 | a:focus {
710 | outline: thin dotted;
711 | }
712 | a:hover, a:active {
713 | outline: 0;
714 | }
715 | a, a:visited, a:active {
716 | text-decoration: none;
717 | color: #fff;
718 | transition: all .3s ease-in-out;
719 | }
720 | a:hover, .glow {
721 | color: #ff0;
722 | text-shadow: 0 0 10px #ff0;
723 | }
724 | ```
725 | ## 48、带CSS3特色的横幅显示
726 | ```
727 | .featureBanner {
728 | position: relative;
729 | margin: 20px
730 | }
731 | .featureBanner:before {
732 | content: "Featured";
733 | position: absolute;
734 | top: 5px;
735 | left: -8px;
736 | padding-right: 10px;
737 | color: #232323;
738 | font-weight: bold;
739 | height: 0px;
740 | border: 15px solid #ffa200;
741 | border-right-color: transparent;
742 | line-height: 0px;
743 | box-shadow: -0px 5px 5px -5px #000;
744 | z-index: 1;
745 | }
746 | .featureBanner:after {
747 | content: "";
748 | position: absolute;
749 | top: 35px;
750 | left: -8px;
751 | border: 4px solid #89540c;
752 | border-left-color: transparent;
753 | border-bottom-color: transparent;
754 | }
755 | ```
756 |
757 | ## 49、限制单行文本超出显示省略号
758 | ```
759 | div{
760 | width: 65px;
761 | height: 30px;
762 | line-height: 30px;
763 | overflow: hidden;
764 | text-overflow: ellipsis;
765 | white-space: nowrap;
766 | font-size: 14px;
767 | }
768 |
769 | ```
770 |
771 | ## 50、限制多行文本超出省略号
772 |
773 | ```
774 | div{
775 | overflow : hidden;
776 | text-overflow: ellipsis;
777 | display: -webkit-box;
778 | -webkit-line-clamp: 2;
779 | -webkit-box-orient: vertical;
780 | }
781 | ```
782 | ## 51、css三角形绘制
783 | ```
784 | .sj {
785 | width: 0;
786 | height: 0;
787 | border-width: 100px;
788 | border-style: solid;
789 | }
790 |
791 | .sj-left {
792 | border-color: transparent pink transparent transparent;
793 | }
794 |
795 | .sj-right {
796 | border-color: transparent transparent transparent pink;
797 | }
798 |
799 | .sj-top {
800 | border-color: transparent transparent pink transparent;
801 | }
802 |
803 | .sj-bottom {
804 | border-color: pink transparent transparent transparent;
805 | }
806 | ```
807 | ## 52、自适应文本框自动换行，限宽不限高
808 | ```
809 | div{
810 | display: inline-block;
811 | min-height: 15px;
812 | max-width: 78%;
813 | padding: 12px 10px;
814 | text-align: left;
815 | font-family: Microsoft YaHei;
816 | word-wrap: break-word;
817 | }
818 | ```
819 |
820 | ## 53、 ~选择器：查找某一个元素后面的所有兄弟元素
821 |
822 | ```
823 | 例如 .test~.name{background:red}
824 | ```
825 |
826 | ## 54、 +选择器：查找某一个元素后面紧邻的兄弟元素
827 |
828 | ```
829 | 例如 .test+.name{background:red}
830 | ```
831 |
832 | ## 55、 用 font-size ：0 来清除边距
833 |
834 | ## 56、 利用padding实现等比例缩放的盒子
835 |
836 | ```
837 | 最外层容器{
838 | display:flex;
839 | display:flex-box;
840 | flex-wrap:warp;
841 | }
842 | 最外层容器 > 子元素{
843 | flex-basis:25%;
844 | }
845 | 最外层容器 > 子元素 > 父元素{
846 | width:100%;
847 | padding-top:75%;
848 | position:relative;
849 | }
850 | 最外层容器 > 子元素 > 父元素 > 子元素{
851 | width:100%;
852 | height:100%;
853 | position:absolute;
854 | top:0;
855 | left:0;
856 | }
857 | ```
858 |
859 |
860 | ## 57、利用pointer-events禁用事件光标变成default阻止hover和hover以及JavaScript 点击事件的触发
861 |
862 | ```
863 | pointer-events:none;
864 | ```
865 |
866 | ## 58、利用 max-width 防止图片撑破容器
867 |
868 | ```
869 | img{
870 | max-width：100%；
871 | display：inline-block;
872 | }
873 | ```
874 |
875 | ## 59、伪类和伪元素的用法
876 |
877 |
878 | ```
879 |
880 | // 伪类是用 : 来表示，伪元素是用 :: 来表示
881 |
882 | 常见的伪类有：
883 | :hover
884 | :active
885 | :focus
886 | :visited
887 | :link
888 | :lang
889 | :first-child
890 | :last-child
891 | :not
892 | :nth-child
893 |
894 | // 伪元素就是不存在DOM文档树中的虚拟元素，它们和HTML元素一样，但是你又无法使用javascript去获取
895 |
896 | 常见伪元素
897 | ::before
898 | ::after
899 | ::first-letter
900 | ::first-line
901 |
902 |
903 | 用 :valid 和 :invalid 来做表单验证
904 |
905 | html5 提供了类似required Email tel 等表单属性
906 | :required // 指定具有required属性的表单元素
907 | :valid // 指定一个通过匹配正确的所要求的表单元素
908 | :invalid // 指定一个不匹配指定要求的表单元素
909 |
910 |
911 | input:vaild{ 如果输入文字则变成绿色
912 | border:1px solid green;
913 | box-shadow:inset 10px 0 0 green;
914 | }
915 | input:invaild{ 如果没有输入则是红色
916 | border:1px solid red;
917 | box-shadow:inset 10px 0 0 red;
918 | }
919 |
920 |
921 | 用:target来实现折叠面板
922 |
923 |
924 | 用:not来排除其他选择器
925 | :not([readonly]):not([.disabled]):not([text]) 等
926 |
927 | 用:nth-child 来实现各行变色
928 | :nth-child(2n+1){background:red;}
929 | :nth-child(2n){backgorund:blue;}
930 |
931 |
932 | 用::selection 来美化选中文本
933 | p::selection{
934 | background:red;
935 | color:green;
936 | }
937 |
938 | 用::placeholder 美化输入框占位符样式
939 | ::placeholder{
940 | color:Red;
941 | }
942 |
943 | 用::first-letter 来实现段落首字下沉
944 | p::first-letter{
945 | font-size:30px;
946 | color:Red;
947 | padding:20px;
948 | }
949 |
950 | 用::first-line 来标记段落的第一行
951 | p::first-line{
952 | color:red;
953 | }
954 | ```
955 | ## 60、footer永远在页面底部
956 |
957 |
958 | ```
959 |
975 | footer {
976 | clear: both;
977 | position: absolute;
978 | bottom: 0px;
979 | width: 100%;
980 | background: #000;
981 | color: #fff;
982 | min-width: 1200px;
983 | height: 200px;
984 | }
985 | ```
986 | ## 61、两个子元素 一个有内容自动撑开，另一个为空如何跟随高度。
987 |
988 |
989 | ```
990 | .f{
991 | display: flex;
992 | align-items: stretch;
993 | }
994 | ```
995 | ## 62、消除transition闪屏
996 |
997 | ```
998 | .css {
999 | transform: translate3d(0,0,0);
1000 | }
1001 | ```
1002 |
--------------------------------------------------------------------------------
/CSS相关/常见的CSS文字居中显示.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | [demo预览地址](https://web.lieme.cn/cssDemo/cssCenter.html)
4 |
5 | ## 1、利用line-height和vertical-align
6 | **html**
7 |
8 | ```
9 |
10 | 测试文字
11 |
12 | ```
13 |
14 | **css**
15 |
16 | ```
17 | .box{
18 | width: 200px;
19 | height: 200px;
20 | overflow: hidden;
21 | background: #ccc;
22 | text-align: center;
23 | }
24 | .box span{
25 | vertical-align: middle;
26 | line-height: 200px;
27 | }
28 | ```
29 |
30 |
31 | ## 2、利用display:table-cell实现水平垂直居中显示
32 | **html**
33 |
34 | ```
35 |
36 | 测试文字测试文字测试文字测试文字
37 |
38 | ```
39 | **css**
40 |
41 | ```
42 | .table{
43 | display: table;
44 | }
45 | .cell{
46 | display: table-cell;
47 | vertical-align: middle;
48 | text-align: center;
49 | }
50 | ```
51 | ## 3、利用定位方式position+transform实现水平垂直居中显示
52 | **html**
53 |
54 | ```
55 |
56 | 测试文字测试文字测试文字测试文字
57 |
58 | ```
59 | **css**
60 |
61 | ```
62 | .box{
63 | position: relative;
64 | }
65 | .box span{
66 | position: absolute;
67 | left: 50%;
68 | top: 50%;
69 | transform: translate(-50%, -50%);
70 | }
71 | ```
72 | ## 4、利用display：flex
73 | **html**
74 |
75 | ```
76 |
77 | 测试文字测试文字测试文字测试文字
78 |
79 | ```
80 | **css**
81 | ```
82 | display:flex;
83 | flex-direction: row;
84 | justify-content: space-around;
85 | align-items: center;
86 | ```
87 |
88 | ## 5、利用display：box
89 | **html**
90 |
91 | ```
92 |
93 | 测试文字测试文字测试文字测试文字
94 |
95 | ```
96 | **css**
97 | ```
98 | display: -webkit-box;
99 | -webkit-box-orient: horizontal;
100 | -webkit-box-pack: center;
101 | -webkit-box-align: center;
102 | ```
103 |
--------------------------------------------------------------------------------
/JS相关/前端常用rule校验.js:
--------------------------------------------------------------------------------
1 | // 前提
2 |
3 | // 在 vue开发中，难免遇到各种表单校验，这里整理了网络上和自己平时高频率用到的一些校验方法。如果错误欢迎指出，后期不断补充更新。
4 |
5 | // 1、是否合法IP地址
6 |
7 | ```
8 | export function validateIP(rule, value,callback) {
9 | if(value==''||value==undefined||value==null){
10 | callback();
11 | }else {
12 | const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
13 | if ((!reg.test(value)) && value != '') {
14 | callback(new Error('请输入正确的IP地址'));
15 | } else {
16 | callback();
17 | }
18 | }
19 | }
20 | ```
21 |
22 | // 2、是否手机号码或者固话
23 |
24 | ```
25 | export function validatePhoneTwo(rule, value, callback) {
26 | const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
27 | if (value == '' || value == undefined || value == null) {
28 | callback();
29 | } else {
30 | if ((!reg.test(value)) && value != '') {
31 | callback(new Error('请输入正确的电话号码或者固话号码'));
32 | } else {
33 | callback();
34 | }
35 | }
36 | }
37 | ```
38 |
39 | // 3、是否固话
40 |
41 | ```
42 | export function validateTelphone(rule, value,callback) {
43 | const reg =/0\d{2}-\d{7,8}/;
44 | if(value==''||value==undefined||value==null){
45 | callback();
46 | }else {
47 | if ((!reg.test(value)) && value != '') {
48 | callback(new Error('请输入正确的固定电话）'));
49 | } else {
50 | callback();
51 | }
52 | }
53 | }
54 | ```
55 |
56 | // 4、是否手机号码
57 |
58 | ```
59 | export function validatePhone(rule, value,callback) {
60 | const reg =/^[1][3-9][0-9]{9}$/;
61 | if(value==''||value==undefined||value==null){
62 | callback();
63 | }else {
64 | if ((!reg.test(value)) && value != '') {
65 | callback(new Error('请输入正确的电话号码'));
66 | } else {
67 | callback();
68 | }
69 | }
70 | }
71 | ```
72 |
73 | // 5、是否身份证号码
74 |
75 | ```
76 | export function validateIdNo(rule, value,callback) {
77 | const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
78 | if(value==''||value==undefined||value==null){
79 | callback();
80 | }else {
81 | if ((!reg.test(value)) && value != '') {
82 | callback(new Error('请输入正确的身份证号码'));
83 | } else {
84 | callback();
85 | }
86 | }
87 | }
88 | ```
89 |
90 | // 6、是否邮箱
91 |
92 | ```
93 | export function validateEMail(rule, value,callback) {
94 | const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
95 | if(value==''||value==undefined||value==null){
96 | callback();
97 | }else{
98 | if (!reg.test(value)){
99 | callback(new Error('请输入正确的邮箱'));
100 | } else {
101 | callback();
102 | }
103 | }
104 | }
105 | ```
106 |
107 | // 7、合法url
108 |
109 | ```
110 | export function validateURL(url) {
111 | const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
112 | return urlregex.test(url);
113 | }
114 | ```
115 |
116 |
117 | // 8、验证内容是否包含英文数字以及下划线
118 |
119 | ```
120 | export function isPassword(rule, value, callback) {
121 | const reg =/^[_a-zA-Z0-9]+$/;
122 | if(value==''||value==undefined||value==null){
123 | callback();
124 | } else {
125 | if (!reg.test(value)){
126 | callback(new Error('仅由英文字母，数字以及下划线组成'));
127 | } else {
128 | callback();
129 | }
130 | }
131 | }
132 | ```
133 |
134 | // 9、自动检验数值的范围
135 |
136 | ```
137 | export function checkMax20000(rule, value, callback) {
138 | if (value == '' || value == undefined || value == null) {
139 | callback();
140 | } else if (!Number(value)) {
141 | callback(new Error('请输入[1,20000]之间的数字'));
142 | } else if (value < 1 || value > 20000) {
143 | callback(new Error('请输入[1,20000]之间的数字'));
144 | } else {
145 | callback();
146 | }
147 | }
148 | ```
149 |
150 |
151 | // 10、验证数字输入框最大数值
152 |
153 | ```
154 | export function checkMaxVal(rule, value,callback) {
155 | if (value < 0 || value > 最大值) {
156 | callback(new Error('请输入[0,最大值]之间的数字'));
157 | } else {
158 | callback();
159 | }
160 | }
161 | ```
162 |
163 | // 11、验证是否1-99之间
164 |
165 | ```
166 | export function isOneToNinetyNine(rule, value, callback) {
167 | if (!value) {
168 | return callback(new Error('输入不可以为空'));
169 | }
170 | setTimeout(() => {
171 | if (!Number(value)) {
172 | callback(new Error('请输入正整数'));
173 | } else {
174 | const re = /^[1-9][0-9]{0,1}$/;
175 | const rsCheck = re.test(value);
176 | if (!rsCheck) {
177 | callback(new Error('请输入正整数，值为【1,99】'));
178 | } else {
179 | callback();
180 | }
181 | }
182 | }, 0);
183 | }
184 | ```
185 |
186 |
187 | // 12、验证是否整数
188 |
189 | ```
190 | export function isInteger(rule, value, callback) {
191 | if (!value) {
192 | return callback(new Error('输入不可以为空'));
193 | }
194 | setTimeout(() => {
195 | if (!Number(value)) {
196 | callback(new Error('请输入正整数'));
197 | } else {
198 | const re = /^[0-9]*[1-9][0-9]*$/;
199 | const rsCheck = re.test(value);
200 | if (!rsCheck) {
201 | callback(new Error('请输入正整数'));
202 | } else {
203 | callback();
204 | }
205 | }
206 | }, 0);
207 | }
208 | ```
209 |
210 | // 13、验证是否整数,非必填
211 |
212 | ```
213 | export function isIntegerNotMust(rule, value, callback) {
214 | if (!value) {
215 | callback();
216 | }
217 | setTimeout(() => {
218 | if (!Number(value)) {
219 | callback(new Error('请输入正整数'));
220 | } else {
221 | const re = /^[0-9]*[1-9][0-9]*$/;
222 | const rsCheck = re.test(value);
223 | if (!rsCheck) {
224 | callback(new Error('请输入正整数'));
225 | } else {
226 | callback();
227 | }
228 | }
229 | }, 1000);
230 | }
231 | ```
232 |
233 |
234 | // 14、 验证是否是[0-1]的小数
235 |
236 | ```
237 | export function isDecimal(rule, value, callback) {
238 | if (!value) {
239 | return callback(new Error('输入不可以为空'));
240 | }
241 | setTimeout(() => {
242 | if (!Number(value)) {
243 | callback(new Error('请输入[0,1]之间的数字'));
244 | } else {
245 | if (value < 0 || value > 1) {
246 | callback(new Error('请输入[0,1]之间的数字'));
247 | } else {
248 | callback();
249 | }
250 | }
251 | }, 100);
252 | }
253 | ```
254 |
255 |
256 | // 15、 验证是否是[1-10]的小数,即不可以等于0
257 |
258 | ```
259 | export function isBtnOneToTen(rule, value, callback) {
260 | if (typeof value == 'undefined') {
261 | return callback(new Error('输入不可以为空'));
262 | }
263 | setTimeout(() => {
264 | if (!Number(value)) {
265 | callback(new Error('请输入正整数，值为[1,10]'));
266 | } else {
267 | if (!(value == '1' || value == '2' || value == '3' || value == '4' || value == '5' || value == '6' || value == '7' || value == '8' || value == '9' || value == '10')) {
268 | callback(new Error('请输入正整数，值为[1,10]'));
269 | } else {
270 | callback();
271 | }
272 | }
273 | }, 100);
274 | }
275 | ```
276 |
277 | // 16、验证是否是[1-100]的小数,即不可以等于0
278 |
279 | ```
280 | export function isBtnOneToHundred(rule, value, callback) {
281 | if (!value) {
282 | return callback(new Error('输入不可以为空'));
283 | }
284 | setTimeout(() => {
285 | if (!Number(value)) {
286 | callback(new Error('请输入整数，值为[1,100]'));
287 | } else {
288 | if (value < 1 || value > 100) {
289 | callback(new Error('请输入整数，值为[1,100]'));
290 | } else {
291 | callback();
292 | }
293 | }
294 | }, 100);
295 | }
296 | ```
297 |
298 | // 17、验证是否是[0-100]的小数
299 |
300 | ```
301 | export function isBtnZeroToHundred(rule, value, callback) {
302 | if (!value) {
303 | return callback(new Error('输入不可以为空'));
304 | }
305 | setTimeout(() => {
306 | if (!Number(value)) {
307 | callback(new Error('请输入[1,100]之间的数字'));
308 | } else {
309 | if (value < 0 || value > 100) {
310 | callback(new Error('请输入[1,100]之间的数字'));
311 | } else {
312 | callback();
313 | }
314 | }
315 | }, 100);
316 | }
317 | ```
318 |
319 |
320 | // 18、验证端口是否在[0,65535]之间
321 |
322 | ```
323 | export function isPort(rule, value, callback) {
324 | if (!value) {
325 | return callback(new Error('输入不可以为空'));
326 | }
327 | setTimeout(() => {
328 | if (value == '' || typeof(value) == undefined) {
329 | callback(new Error('请输入端口值'));
330 | } else {
331 | const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
332 | const rsCheck = re.test(value);
333 | if (!rsCheck) {
334 | callback(new Error('请输入在[0-65535]之间的端口值'));
335 | } else {
336 | callback();
337 | }
338 | }
339 | }, 100);
340 | }
341 | ```
342 |
343 | // 19、验证端口是否在[0,65535]之间，非必填,isMust表示是否必填
344 |
345 | ```
346 | export function isCheckPort(rule, value, callback) {
347 | if (!value) {
348 | callback();
349 | }
350 | setTimeout(() => {
351 | if (value == '' || typeof(value) == undefined) {
352 | //callback(new Error('请输入端口值'));
353 | } else {
354 | const re = /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
355 | const rsCheck = re.test(value);
356 | if (!rsCheck) {
357 | callback(new Error('请输入在[0-65535]之间的端口值'));
358 | } else {
359 | callback();
360 | }
361 | }
362 | }, 100);
363 | }
364 | ```
365 |
366 |
367 | // 20、小写字母
368 |
369 | ```
370 | export function validateLowerCase(val) {
371 | const reg = /^[a-z]+$/;
372 | return reg.test(val);
373 | }
374 | ```
375 |
376 | // 22、两位小数验证
377 |
378 | ```
379 | const validateValidity = (rule, value, callback) => {
380 | if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
381 | callback(new Error('最多两位小数！！！'));
382 | } else {
383 | callback();
384 | }
385 | };
386 | ```
387 |
388 | // 23、是否大写字母
389 |
390 | ```
391 | export function validateUpperCase(val) {
392 | const reg = /^[A-Z]+$/;
393 | return reg.test(val);
394 | }
395 | ```
396 |
397 | // 24、是否大小写字母
398 |
399 | ```
400 | export function validatAlphabets(val) {
401 | const reg = /^[A-Za-z]+$/;
402 | return reg.test(val);
403 | }
404 | ```
405 |
406 |
407 | // 25、密码校验
408 |
409 | ```
410 | export const validatePsdReg = (rule, value, callback) => {
411 | if (!value) {
412 | return callback(new Error('请输入密码'))
413 | }
414 | if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {
415 | callback(new Error('请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种'))
416 | } else {
417 | callback()
418 | }
419 | }
420 | ```
421 |
422 |
423 | // 26、中文校验
424 |
425 | ```
426 | export const validateContacts = (rule, value, callback) => {
427 | if (!value) {
428 | return callback(new Error('请输入中文'))
429 | }
430 | if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {
431 | callback(new Error('不可输入特殊字符'))
432 | } else {
433 | callback()
434 | }
435 | }
436 | ```
437 |
438 |
439 |
440 | // 27、 账号校验
441 |
442 | ```
443 | export const validateCode = (rule, value, callback) => {
444 | if (!value) {
445 | return callback(new Error('请输入账号'))
446 | }
447 | if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(value)) {
448 | callback(new Error('账号必须为6-20位字母和数字组合'))
449 | } else {
450 | callback()
451 | }
452 | }
453 | ```
454 | // 28 、纯数字校验
455 |
456 | ```
457 | export const validateNumber = (rule, value, callback) => {
458 | if (value !== '') {
459 | if (!numberReg.test(value)) {
460 | callback(new Error('请输入数字'))
461 | } else {
462 | callback()
463 | }
464 | } else {
465 | callback(new Error('请输入值'))
466 | }
467 | }
468 | ```
469 | // 29、最多一位小数
470 |
471 | ```
472 | const onePoint = (rule, value, callback) => {
473 | if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)) {
474 | callback(new Error('最多一位小数！！！'));
475 | } else {
476 | callback();
477 | }
478 | };
479 | ```
480 |
481 |
482 | // 公众号【执行上下文】
--------------------------------------------------------------------------------
/JS相关/前端常用正则表达式.js:
--------------------------------------------------------------------------------
1 | ### 1. 身份证校验
2 |
3 |
4 | ```
5 | const reg =/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
6 | console.log(reg.test(320874199709084732))
7 | ```
8 | ### 2. 根据身份证获取出生年月日
9 |
10 |
11 | ```
12 | function getBirthdayFromIdCard(idCard) {
13 | var birthday = "";
14 | if(idCard != null && idCard != ""){
15 | if(idCard.length == 15){
16 | birthday = "19"+idCard.substr(6,6);
17 | } else if(idCard.length == 18){
18 | birthday = idCard.substr(6,8);
19 | }
20 | birthday = birthday.replace(/(.{4})(.{2})/,"$1-$2-");
21 | }
22 | return birthday;
23 | }
24 | ```
25 |
26 | ### 3. 手机规则校验
27 | ```
28 | const reg = /^1[3456789]\d{9}$/;
29 | console.log(reg.test(13879763331))
30 |
31 | ```
32 | ### 4. 用户名正则
33 | ```
34 | //用户名正则，4到16位（字母，数字，下划线，减号）
35 | const reg = /^[a-zA-Z0-9_-]{4,16}$/;
36 | //输出 true
37 | console.log(ref.test("小夭同学"));
38 | ```
39 |
40 | ### 5. 密码强度正则
41 |
42 | ```
43 | //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
44 | const reg = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
45 | //输出 true
46 | console.log("=="+reg.test("infopush#"));
47 | ```
48 | ### 6. 整数正则
49 |
50 | ```
51 | //正整数正则
52 | const posReg = /^\d+$/;
53 | //负整数正则
54 | const negReg = /^-\d+$/;
55 | //整数正则
56 | const numReg = /^-?\d+$/;
57 | //输出 true
58 | console.log(posReg.test("42"));
59 | //输出 true
60 | console.log(negReg.test("-42"));
61 | //输出 true
62 | console.log(numReg.test("-42"));
63 | ```
64 | ### 7. 数字正则
65 |
66 | ```
67 | //正数正则
68 | const posReg = /^\d*\.?\d+$/;
69 | //负数正则
70 | const negReg = /^-\d*\.?\d+$/;
71 | //数字正则
72 | const numReg = /^-?\d*\.?\d+$/;
73 | console.log(posReg.test("42.2"));
74 | console.log(negReg.test("-42.2"));
75 | console.log(numReg.test("-42.2"));
76 | ```
77 |
78 | ### 8. Email正则
79 |
80 | ```
81 | //Email正则
82 | const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
83 | //输出 true
84 | console.log(reg.test(" 222299154507@qq.com"));
85 | ```
86 |
87 |
88 | ### 9. URL正则
89 |
90 | ```
91 | //URL正则
92 | const reg= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
93 | //输出 true
94 | console.log(reg.test("http://lieme.cn"));
95 | ```
96 |
97 | ### 10. IPv4地址正则
98 |
99 | ```
100 | //ipv4地址正则
101 | const reg = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
102 | //输出 true
103 | console.log(reg.test("115.28.47.26"));
104 | ```
105 |
106 | ### 11. 日期正则
107 |
108 | ```
109 | //日期正则，简单判定,未做月份及日期的判定
110 | const reg = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
111 | //输出 true
112 | console.log(reg.test("2017-05-11"));
113 | //输出 true
114 | console.log(reg.test("2017-15-11"));
115 | //日期正则，复杂判定
116 | const reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
117 | //输出 true
118 | console.log(reg.test("2017-02-11"));
119 | //输出 false
120 | console.log(reg.test("2017-15-11"));
121 | //输出 false
122 | console.log(reg.test("2017-02-29"));
123 | ```
124 |
125 | ### 12. QQ号码正则
126 |
127 | ```
128 | //QQ号正则，5至11位
129 | const reg = /^[1-9][0-9]{4,10}$/;
130 | //输出 true
131 | console.log(reg.test("11111"));
132 | ```
133 |
134 |
135 | ### 13. 微信号正则
136 |
137 | ```
138 | //微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
139 | const reg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
140 | //输出 true
141 | console.log(reg.test("infopush"));
142 | ```
143 |
144 | ### 14. 车牌号正则
145 |
146 | ```
147 | //车牌号正则
148 | const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
149 | //输出 true
150 | console.log(reg.test("苏B39006"));
151 | ```
152 |
153 | ### 15. 包含中文正则
154 |
155 | ```
156 | //包含中文正则
157 | const reg = /[\u4E00-\u9FA5]/;
158 | //输出 true
159 | console.log(reg.test("小夭同学"));
160 | ```
161 |
162 | ### 16. 匹配中文字符
163 |
164 |
165 | ```
166 | const reg = /[\u4e00-\u9fa5]/gm
167 | console.log(reg.test('小夭同学')
168 | ```
169 |
170 | ### 17. 匹配双字节字符
171 |
172 |
173 | ```
174 | const reg = /[^\x00-\xff]/igm
175 | console.log(reg.test('1212')
176 | ```
177 |
178 |
179 | 18. 匹配首位空白
180 |
181 |
182 | ```
183 | const reg = /(^\s*)|(\s*$)/
184 | console.log(reg.test(' d ')
185 | ```
186 |
187 | ### 19. 只能为数字
188 |
189 | ```
190 | const reg = /^\d+$/
191 | console.log(reg.test(112))
192 | ```
193 |
194 | ### 20. 只能输入n个数字
195 |
196 |
197 | ```
198 | const reg = /^\d{n}$/
199 | console.log(reg.test(11111))
200 | ```
201 |
202 |
203 | ### 21. 至少输入n个数字
204 |
205 |
206 | ```
207 | const reg = /^\d{n,}$/
208 | console.log(reg.test(2222))
209 | ```
210 |
211 | ### 22. 只能输入 m 到 n 个数字
212 |
213 |
214 | ```
215 | const reg = /^\d{m,n}$/
216 | console.log(reg.test(1212))
217 | ```
218 | ### 23. 只能由字母组成
219 |
220 |
221 | ```
222 | const reg = /^[a-z]+$/i
223 | console.log(reg.rest('ddd'))
224 | ```
225 | ### 23. 只能由大写 或 小字母组成
226 |
227 |
228 | ```
229 | const reg = /^[A-Z]+$/
230 | console.log(reg.test(SSS))
231 |
232 | const reg = /^[a-z]+$/
233 | console.log(reg.test(sss))
234 | ```
235 | ### 24. 只能由英文和数字组成
236 |
237 | ```
238 | const reg = /^[a-z0-9]+$/i
239 | console.log(reg.test(333ffF))
240 | ```
241 |
242 | ### 25. 只能英文、数字、下划线组成
243 |
244 |
245 | ```
246 | const reg = /^\w+$/
247 | console.log(reg.test(dd33_))
248 | ```
249 |
250 | ### 26. 带两位小数点的正数或负数
251 |
252 |
253 | ```
254 | const reg =^(\-)?\d+(\.\d{1,2})?$
255 | console.log(reg.test(11.11))
256 | ```
257 |
258 | ### 27. 带+、-的整数
259 |
260 | ```
261 | const reg = /^[+-]?[0-9]+$/
262 | console.log(reg.test(-11.11))
263 | ```
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # JsCode
2 | > 前端相关常用代码分享
3 | > 包含JS,CSS等
4 |
5 | ## JS相关
6 | - 前端常用rule校验.js
7 | - 前端常用正则表达式.js
8 |
9 | ## CSS相关
10 | - 常见的CSS文字居中显示.md
11 | - 前端常用的CSS代码块.md
12 |
13 |
14 | 
--------------------------------------------------------------------------------