How to realize form form in layui

This article mainly shows you "how to achieve the form form in layui", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve the form form in layui" this article.

1. Brief introduction to layui:

Layui is a front-end UI framework written by its own module specification, open source modular front-end UI framework, different from those based on the underlying MVVM UI framework.

Advantages: native development mode, modularization and strong compatibility

Layui can be used as a rapid development scheme for the background system and foreground interface of PC web pages.

II. Directory structure

III. Introduction methods and form cases

Layui_learn_one layui.use (['form',' layedit', 'laydate'], function () {var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate; / / date laydate.render ({elem:' # date'}); laydate.render ({elem:'# date1'}) / / create an editor var editIndex = layedit.build ('LAY_demo_editor'); / / Custom validation rule form.verify ({title: function (value) {if (value.length < 5) {return' title must be at least 5 characters) }, pass: [/ (. +) {6 switchTest 12} $/, 'password must be 6 to 12 digits'], content: function (value) {layedit.sync (editIndex);}}); / / listen on specified switch form.on ('switch (switchTest)', function (data) {layer.msg ('switch checked:'+ (this.checked?) 'true':' false'), {offset: '6px'}); layer.tips (' warm reminder: please note that the text of the switch status can be defined at will, not just ON | OFF', data.othis)}) / / listen for submission form.on ('submit (demo1)', function (data) {layer.alert (JSON.stringify (data.field), {title: 'final submission information'}) return false;});}) Form collection demo single-line input box verification required items to verify mobile phone Verify mailbox multi-rule verification verification date verification link To verify your ID card, please fill in the password range of 6 to 12 digits. Single-line selection box, writing, reading games, music travel, group selection box Please choose the first city where you work, your job number, your favorite teacher search. Select box directly select or search to select layer form layim element laytpl upload laydate laypage flow util code tree Layedit nav tab table select checkbox switch radio linkage selection box, please select Zhejiang Province, Jiangxi Province Please choose a city in Fujian Province, Hangzhou, Ningbo, Wenzhou, Taizhou, Shaoxing, please choose a county / district Xihu District. Lin'an City, Yuhang District is just a demonstration of linkage typesetting. No linkage interaction check box original check box switch-default off Switch-default open checkbox plain text field editor Submit and reset immediately all of the content of the article "how to implement form forms in layui" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!