-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathform-1.html
More file actions
937 lines (890 loc) · 41.4 KB
/
form-1.html
File metadata and controls
937 lines (890 loc) · 41.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单模块文档 - Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script>
;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
</script>
<link rel="stylesheet" href="layui.css-t=1632659138211.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632659138211" media="all">
<link rel="stylesheet" href="global.css-t=1632659138211-19.css" tppabs="http://res.layui.com/static/css/global.css?t=1632659138211-19" media="all">
</head>
<body>
<div class="layui-header header header-doc">
<div class="layui-container">
<a class="logo" href="index.htm" tppabs="http://www.layui.com/">
<img src="logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
</a>
<div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
<div class="layui-hide-xs site-notice"></div>
<ul class="layui-nav" id="LAY_NAV_TOP">
<li class="layui-nav-item layui-this">
<a href="index-1.htm" tppabs="http://www.layui.com/doc/">文档</a>
</li>
<li class="layui-nav-item ">
<a href="index-2.htm" tppabs="http://www.layui.com/demo/">示例</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>-->
周边
</a>
<dl class="layui-nav-child layui-nav-child-c">
<dd class="layui-hide-sm layui-show-xs" lay-unselect>
<a href="javascript:if(confirm(%27https://gitee.com/sentsin/layui/issues \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://gitee.com/sentsin/layui/issues%27" tppabs="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
<hr>
</dd>
<dd lay-unselect><a href="alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
<dd lay-unselect><a href="javascript:if(confirm(%27http://fly.layui.com/extend/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?%27))window.location=%27http://fly.layui.com/extend/%27" tppabs="http://fly.layui.com/extend/" target="_blank">扩展组件</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="javascript:if(confirm(%27http://gitee.com/sentsin/layui/issues \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?%27))window.location=%27http://gitee.com/sentsin/layui/issues%27" tppabs="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
</li>
</ul>
</div>
</div>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<ul class="site-dir">
<li><a href="#use"><cite>使用</cite></a></li>
<li><a href="#render">
<cite>更新渲染</cite> <span class="layui-badge-dot"></span>
</a></li>
<li><a href="#attr"><cite>预设元素属性</cite></a></li>
<li><a href="#on"><cite>事件触发</cite></a></li>
<li><a href="#onselect"><cite>触发select选择</cite></a></li>
<li><a href="#oncheckbox"><cite>触发checkbox复选</cite></a></li>
<li><a href="#onswitch"><cite>触发switch开关</cite></a></li>
<li><a href="#onradio"><cite>触发radio单选</cite></a></li>
<li><a href="#onsubmit"><cite>触发submit提交</cite></a></li>
<li><a href="#val"><cite>表单赋值 / 取值</cite> <span class="layui-badge-dot"></span></a></li>
<li><a href="#verify"><cite>表单验证</cite> <span class="layui-badge-dot"></span></a></li>
</ul>
<div class="layui-container layui-row">
<div class="layui-col-md3">
<div class="layui-panel site-menu">
<ul class="layui-menu layui-menu-lg">
<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
<div class="layui-menu-body-title">
基础说明
</div>
<hr>
<ul>
<li class="">
<div class="layui-menu-body-title">
<a href="index-1.htm" tppabs="http://www.layui.com/doc/">
<span>开始使用 </span>
<span class="layui-font-12 layui-font-gray">Getting Started</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
<span>底层方法 </span>
<span class="layui-font-12 layui-font-gray">基础支撑</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="element.html" tppabs="http://www.layui.com/doc/base/element.html">
<span>页面元素 </span>
<span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
<span>模块规范 </span>
<span class="layui-font-12 layui-font-gray">使用 扩展</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
<span>常见问题 </span>
<span class="layui-font-12 layui-font-gray">FAQ</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
<span>更新日志 </span>
<span class="layui-font-12 layui-font-gray">changelog</span>
<span class="layui-badge-dot"></span>
</a>
</div>
</li>
</ul>
</li>
<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
<div class="layui-menu-body-title">
页面元素
</div>
<hr>
<ul>
<li class="">
<div class="layui-menu-body-title">
<a href="layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
<span>布局 </span>
<span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="color.html" tppabs="http://www.layui.com/doc/element/color.html">
<span>颜色 </span>
<span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
<span>图标 </span>
<span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
<span>动画 </span>
<span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="button.html" tppabs="http://www.layui.com/doc/element/button.html">
<span>按钮 </span>
<span class="layui-font-12 layui-font-gray">button</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="form.html" tppabs="http://www.layui.com/doc/element/form.html">
<span>表单 </span>
<span class="layui-font-12 layui-font-gray">form 元素集合</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
<span>导航 </span>
<span class="layui-font-12 layui-font-gray">nav 面包屑</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
<span>菜单 </span>
<span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
<span class="layui-badge-dot"></span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
<span>选项卡 </span>
<span class="layui-font-12 layui-font-gray">Tabs 切换</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
<span>进度条 </span>
<span class="layui-font-12 layui-font-gray">progress</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
<span>面板 </span>
<span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="table.html" tppabs="http://www.layui.com/doc/element/table.html">
<span>表格 </span>
<span class="layui-font-12 layui-font-gray">静态 table</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
<span>徽章 </span>
<span class="layui-font-12 layui-font-gray">小圆点 小边框</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
<span>时间线 </span>
<span class="layui-font-12 layui-font-gray">timeline</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
<span>辅助 </span>
<span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
</a>
</div>
</li>
</ul>
</li>
<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
<div class="layui-menu-body-title">
内置模块
</div>
<hr>
<ul>
<li class="">
<div class="layui-menu-body-title">
<a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
<span>弹出层 </span>
<span class="layui-font-12 layui-font-gray">layer</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
<span>日期与时间选择 </span>
<span class="layui-font-12 layui-font-gray">laydate</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
<span>分页 </span>
<span class="layui-font-12 layui-font-gray">laypage</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
<span>模板引擎 </span>
<span class="layui-font-12 layui-font-gray">laytpl</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="table-1.html" tppabs="http://www.layui.com/doc/modules/table.html">
<span>数据表格 </span>
<span class="layui-font-12 layui-font-gray">table</span>
</a>
</div>
</li>
<li class="layui-menu-item-checked2">
<div class="layui-menu-body-title">
<a href="form-1.html" tppabs="http://www.layui.com/doc/modules/form.html">
<span>表单 </span>
<span class="layui-font-12 layui-font-gray">form</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
<span>文件上传 </span>
<span class="layui-font-12 layui-font-gray">upload</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
<span>下拉菜单 </span>
<span class="layui-font-12 layui-font-gray">dropdown</span>
<span class="layui-badge-dot"></span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
<span>穿梭框 </span>
<span class="layui-font-12 layui-font-gray">transfer</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
<span>树形组件 </span>
<span class="layui-font-12 layui-font-gray">tree</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
<span>颜色选择器 </span>
<span class="layui-font-12 layui-font-gray">colorpicker</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="element-1.html" tppabs="http://www.layui.com/doc/modules/element.html">
<span>常用元素操作 </span>
<span class="layui-font-12 layui-font-gray">element</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
<span>滑块 </span>
<span class="layui-font-12 layui-font-gray">slider</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
<span>评分 </span>
<span class="layui-font-12 layui-font-gray">rate</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
<span>轮播 </span>
<span class="layui-font-12 layui-font-gray">carousel</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
<span>流加载 </span>
<span class="layui-font-12 layui-font-gray">flow</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
<span>工具组件 </span>
<span class="layui-font-12 layui-font-gray">util</span>
</a>
</div>
</li>
<li class="">
<div class="layui-menu-body-title">
<a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
<span>代码高亮显示 </span>
<span class="layui-font-12 layui-font-gray">code</span>
</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="layui-hide-v"> - </div>
</div>
<div class="layui-col-md9 site-content">
<h1 class="site-h1"><i class="layui-icon"></i> 表单模块文档 - layui.form</h1>
<blockquote class="site-text layui-elem-quote">
我们通常会在最常用的模块上耗费更多的精力，用尽可能简单的方式诠释 layui 所带来的便捷性。显而易见，form 是我们非常看重的一块。于是它试图用一贯极简的姿态，去捕获你对它的深深青睐。寄托在原始表单元素上的属性设定，及其全自动的初始渲染，和基于事件驱动的接口书写方式，会让你觉得，传统模式下的组件调用形式，也可以是那样的优雅、简单。然而文字的陈述始终是苍白的，所以用行动慢慢感受 layui.form 给你的项目带来的效率提升吧。
</blockquote>
<blockquote class="site-text layui-elem-quote">
<p>模块加载名称：<em>form</em></p>
</blockquote>
<div class="site-title">
<fieldset><legend><a name="use">使用</a></legend></fieldset>
</div>
<div class="site-text">
<p> layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上<em>class="layui-form"</em>，一切的工作都会在你加载完form模块后，自动完成。如下是一个最基本的例子：</p>
<pre class="layui-code" lay-title="layui.form小例子">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="layui.css" media="all">
</head>
<body>
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value="0">写作</option>
<option value="1">阅读</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关关</label>
<div class="layui-input-block">
<input type="checkbox" lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关开</label>
<div class="layui-input-block">
<input type="checkbox" checked lay-skin="switch">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">请填写描述</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script src="layui.js"></script>
<script>
layui.use('form', function(){
var form = layui.form;
//各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
</html>
</pre>
<p>正如你上述看到的，你必须放入 layui 所<em>规范的元素结构</em>，form 模块才会对其进行重置渲染。值得注意的是，在具体的每一块表单元素中，你仍是像往日一样写 input 等标签即可。另外，我们对我们所规范的结构进行了响应式的支持，而针对一些不同的表单排版，比如行内表单，你也只需要设定我们所定义好的 class 即可。关于这一块，你可以移步页面元素的表单文档中做详细了解。而事实上你的大部分焦点可能也在那里，但当前这篇文档主要还是介绍 form 整体模块。</p>
</div>
<div class="site-title">
<fieldset><legend><a name="render">更新渲染</a></legend></fieldset>
</div>
<div class="site-text">
<p>有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制（因为我们叫经典模块化框架，<em>偷笑.gif</em>） 但没有关系，你只需要执行 <em>form.render(type, filter);</em> 方法即可。</p>
<p>第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：</p>
<table class="layui-table">
<thead>
<tr>
<th>参数（type）值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>select</td>
<td>刷新select选择框渲染</td>
</tr>
<tr>
<td>checkbox</td>
<td>刷新checkbox复选框（含开关）渲染</td>
</tr>
<tr>
<td>radio</td>
<td>刷新radio单选框框渲染</td>
</tr>
</tbody>
</table>
<pre class="layui-code" lay-title="例子">
form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
//……
</pre>
<p>第二个参数：filter，为 <em>class="layui-form"</em> 所在元素的 <em>lay-filter=""</em> 的值。你可以借助该参数，对表单完成局部更新。</p>
<pre class="layui-code" lay-title="例子">
【HTML】
<div class="layui-form" lay-filter="test1">
…
</div>
<div class="layui-form" lay-filter="test2">
…
</div>
【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
//……
</pre>
</div>
<div class="site-title">
<fieldset><legend><a name="attr">预设元素属性</a></legend></fieldset>
</div>
<div class="site-text">
<p>事实上在使用表单时，你的一半精力可能会在元素本身上。所以我们把一些基础属性的配置恰恰安放在了标签本身上。如：</p>
<pre class="layui-code">
<input type="text" lay-verify="email">
<input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">
<button lay-submit>提交</button>
</pre>
<p>上述的<em>lay-verify</em>、<em>lay-skin</em>、<em>lay-filter</em>、<em>lay-submit</em>神马的都是我们所说的预设的元素属性，他们可以使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制。目前我们可支持的属性如下表所示：</p>
<table class="layui-table">
<thead>
<tr>
<th style="width: 80px;">属性名</th>
<th style="width: 150px;">属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>任意字符</td>
<td>设定元素名称，一般用于checkbox、radio框</td>
</tr>
<tr>
<td>lay-skin</td>
<td>
switch（开关风格）
primary（原始风格）
</td>
<td>定义元素的风格，目前只对 <em>checkbox</em> 元素有效，可将其转变为开关样式</td>
</tr>
<tr>
<td>lay-ignore</td>
<td>任意字符或不设值</td>
<td>是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格</td>
</tr>
<tr>
<td>lay-filter</td>
<td>任意字符</td>
<td>事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。</td>
</tr>
<tr>
<td>lay-verify</td>
<td>required（必填项）<br>phone（手机号）<br>email（邮箱）<br>url（网址）<br>number（数字）<br>date（日期）<br>identity（身份证）<br>自定义值</td>
<td>同时支持多条规则的验证，格式：<em>lay-verify="验证A|验证B"</em>
<br>如：<em>lay-verify="required|phone|number"</em>
<br><br>另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify="pass"，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。<a href="#verify">详见表单验证</a></td>
</tr>
<tr>
<td>lay-verType</td>
<td>
tips（吸附层）<br>alert（对话框）<br>msg（默认）
</td>
<td>用于定义异常提示层模式。</td>
</tr>
<tr>
<td>lay-reqText</td>
<td>
任意字符
</td>
<td>
用于自定义必填项（即设定了 lay-verify="required" 的表单）的提示文本
<br> 注意：<em>该功能为 layui 2.5.0 新增</em>
</td>
</tr>
<tr>
<td>lay-submit</td>
<td>无需填写值</td>
<td>绑定触发提交的元素，如button</td>
</tr>
</tbody>
</table>
</div>
<div class="site-title">
<fieldset><legend><a name="on">事件触发</a></legend></fieldset>
</div>
<div class="site-text">
<p>语法：<a>form.on('event(过滤器值)', callback);</a></p>
<p>form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：</p>
<table class="layui-table">
<thead>
<tr>
<th>event</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>select</td>
<td>触发select下拉选择事件</td>
</tr>
<tr>
<td>checkbox</td>
<td>触发checkbox复选框勾选事件</td>
</tr>
<tr>
<td>switch</td>
<td>触发checkbox复选框开关事件</td>
</tr>
<tr>
<td>radio</td>
<td>触发radio单选框事件</td>
</tr>
<tr>
<td>submit</td>
<td>触发表单提交事件</td>
</tr>
</tbody>
</table>
<p>默认情况下，事件所触发的是全部的form模块元素，但如果你只想触发某一个元素，使用事件过滤器即可。<br>如：<em><select lay-filter="test"></select></em></p>
<pre class="layui-code">
form.on('select(test)', function(data){
console.log(data);
});
</pre>
</div>
<div class="site-title">
<fieldset><legend><a name="onselect">触发select选择</a></legend></fieldset>
</div>
<div class="site-text">
<p>下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：</p>
<pre class="layui-code" lay-title="语法">
form.on('select(filter)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
</pre>
<p>请注意：如果你想触发所有的select，去掉过滤器<em>(filter)</em>即可。下面将不再对此进行备注。</p>
</div>
<div class="site-title">
<fieldset><legend><a name="oncheckbox">触发checkbox复选</a></legend></fieldset>
</div>
<div class="site-text">
<p>复选框点击勾选时触发，回调函数返回一个object参数，携带两个成员：</p>
<pre class="layui-code" lay-title="语法">
form.on('checkbox(filter)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中，true或者false
console.log(data.value); //复选框value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
</pre>
</div>
<div class="site-title">
<fieldset><legend><a name="onswitch">触发switch开关</a></legend></fieldset>
</div>
<div class="site-text">
<p>开关被点击时触发，回调函数返回一个object参数，携带两个成员：</p>
<pre class="layui-code" lay-title="语法">
form.on('switch(filter)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //开关是否开启，true或者false
console.log(data.value); //开关value值，也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});
</pre>
</div>
<div class="site-title">
<fieldset><legend><a name="onradio">触发radio单选</a></legend></fieldset>
</div>
<div class="site-text">
<p>radio单选框被点击时触发，回调函数返回一个object参数，携带两个成员：</p>
<pre class="layui-code" lay-title="语法">
form.on('radio(filter)', function(data){
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});
</pre>
</div>
<div class="site-title">
<fieldset><legend><a name="onsubmit">触发submit提交</a></legend></fieldset>
</div>
<div class="site-text">
<p>按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：</p>
<pre class="layui-code" lay-title="语法">
form.on('submit(*)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
</pre>
<p>再次温馨提示：上述的<em>submit(*)</em>中的 <em>*</em> 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：</p>
<pre class="layui-code">
<button lay-submit lay-filter="*">提交</button>
</pre>
<p>你可以把*号换成任意的值，如：<em>lay-filter="go"</em>，但触发事件时也要改成 <em>form.on('submit(go)', callback);</em> </p>
</div>
<div class="site-title">
<fieldset><legend><a name="val">表单赋值 / 取值</a></legend></fieldset>
</div>
<div class="site-text">
<p>语法：<em>form.val('filter', object);</em></p>
<p>
用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。
<br>注：<span style="color: #FF5722;">其中「取值」功能为 layui 2.5.5 开始新增</span>
</p>
<pre class="layui-code">
//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
"username": "贤心" // "name": "value"
,"sex": "女"
,"auth": 3
,"check[write]": true
,"open": false
,"desc": "我爱layui"
});
//获取表单区域所有值
var data1 = form.val("formTest");
</pre>
<p>第二个参数中的键值是表单元素对应的 <em>name</em> 和 <em>value</em>。</p>
</div>
<div class="site-title">
<fieldset><legend><a name="verify">表单验证</a></legend></fieldset>
</div>
<div class="site-text">
<p>我们对表单的验证进行了非常巧妙的支持，大多数时候你只需要在表单元素上加上 <em>lay-verify=""</em> 属性值即可。如：</p>
<pre class="layui-code">
<input type="text" lay-verify="email">
还同时支持多条规则的验证，如下：
<input type="text" lay-verify="required|phone|number">
</pre>
<p>
上述对输入框定义了一个邮箱规则的校验，它会在 form 模块内部完成。目前我们内置的校验支持见上文的：<a href="#attr">预设元素属性</a>
</p>
<p>除了内置的校验规则外，你还可以自定义验证规则，通常对于比较复杂的校验，这是非常有必要的。</p>
<pre class="layui-code" lay-title="语法">
form.verify({
username: function(value, item){ //<em>value：表单的值、item：表单的DOM对象</em>
if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
return '用户名不能有特殊字符';
}
if(/(^\_)|(\__)|(\_+$)/.test(value)){
return '用户名首尾不能出现下划线\'_\'';
}
if(/^\d+\d+\d$/.test(value)){
return '用户名不能全为数字';
}
//如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
if(value === 'xxx'){
alert('用户名不能为敏感词');
return true;
}
}
//我们既支持上述函数式的方式，也支持下述数组的形式
//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
});
</pre>
<p>当你自定义了类似上面的验证规则后，你只需要把 key 赋值给输入框的 <em>lay-verify</em> 属性即可：</p>
<pre class="layui-code">
<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">
</pre>
</div>
<div class="site-title">
<fieldset><legend><a name="other">再次温馨提示一下</a></legend></fieldset>
</div>
<div class="site-text">
<p>针对一些不同的表单排版，比如行内表单、整体表单风格、按钮风格等等，请移步到文档导航左侧【<em>页面元素</em>】下的指定分类即可。</p>
</div>
<div class="layui-elem-quote">
<p>layui - 在每一个细节中，用心与你沟通</p>
</div>
</div>
</div>
<div class="layui-footer footer footer-doc">
<p>
Copyright © 2021 <a href="index.htm" tppabs="http://www.layui.com/">layui.com</a> MIT Licensed</p>
<p>
<a href="disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a>
<a href="relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
<a href="javascript:;" site-event="weixinmp">公众号</a>
<a target="_blank" href="javascript:if(confirm(%27http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36010902000274 \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?%27))window.location=%27http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36010902000274%27" tppabs="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36010902000274" rel="nofollow">
<img src="168_1628847893037_87773.png" tppabs="http://cdn.layui.com/upload/2021_8/168_1628847893037_87773.png">
赣公网安备 36010902000274号
</a>
<a href="javascript:if(confirm(%27https://beian.miit.gov.cn/ \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://beian.miit.gov.cn/%27" tppabs="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">赣ICP备13006272号</a>
</p>
<div class="site-union">
<p class="site-union-desc">
<span>
感谢以下平台提供云加速支持
</span>
</p>
<p>
<a href="javascript:if(confirm(%27https://console.upyun.com/register/?invite=SJ0wu6g2- \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://console.upyun.com/register/?invite=SJ0wu6g2-%27" tppabs="https://console.upyun.com/register/?invite=SJ0wu6g2-" target="_blank" rel="nofollow" sponsor="upyun">
<img src="upyun.png-t=1.png" tppabs="http://res.layui.com/static/images/other/upyun.png?t=1" alt="upyun">
</a>
<a href="javascript:if(confirm(%27https://www.maoyun.com/?from=layui \n\nThis file was not retrieved by Teleport Pro, because it is addressed using an unsupported protocol (e.g., gopher). \n\nDo you want to open it from the server?%27))window.location=%27https://www.maoyun.com/?from=layui%27" tppabs="https://www.maoyun.com/?from=layui" target="_blank" rel="nofollow" sponsor="maoyun">
<img src="168_1559291577683_9348.png" tppabs="http://cdn.layui.com/upload/2019_5/168_1559291577683_9348.png" alt="maoyun">
</a>
</p>
</div>
</div>
<script>
window.global = {
pageType: 'doc'
,preview: function(){
var preview = document.getElementById('LAY_preview');
return preview ? preview.innerHTML : '';
}()
};
</script>
<script async src="adsbygoogle.js" tppabs="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div class="site-tree-mobile layui-hide">
<i class="layui-icon layui-icon-spread-left"></i>
</div>
<div class="site-mobile-shade"></div>
<script src="layui.js-t=1632659138211.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632659138211" charset="utf-8"></script>
<script>
layui.config({
base: '//res.layui.com/static/lay/modules/layui/'
,version: '1632659138211'
}).use('global');
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "hm.js-d214947968792b839fd669a4decaaffc"/*tpa=https://hm.baidu.com/hm.js?d214947968792b839fd669a4decaaffc*/;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>