form 是我们非常看重的一块。layui中的form实现全自动的初始渲染，和基于事件驱动的接口书写方式。我整理了layui中form的配置。下边直接给一个栗子，后台采用.net MVC，除了razor模板中用到了一点后台的内容，其他都是layui中的内容，这里就不粘后台代码了：

HTML文本

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>layui.form小例子</title>

    <script src="~/Content/layui/layui.js"></script>

    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />

</head>

<body>

    <form class="layui-form" action="/Home/AddUserInfo" method="get" lay-filter="formfilter">

        <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

        <div class="layui-form-item">

            <label class="layui-form-label">用户名</label>

            <div class="layui-input-block">

                <input type="text" name="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="Role" lay-filter="selectfilter">

                    @foreach (var item in ViewBag.RoleList)

                    {

                        <option value="@item.Id">@item.RoleName</option>

                    }

                </select>

            </div>

        </div>

        <div class="layui-form-item">

            <label class="layui-form-label">爱好</label>

            <div class="layui-input-block">

                <input value="1" type="checkbox" name="LikeWrite" title="写作">

                <input value="2" type="checkbox" name="LikeRead" title="阅读">

            </div>

        </div>

        <div class="layui-form-item">

            <label class="layui-form-label">性别</label>

            <div class="layui-input-block">

                <input type="radio" name="Gender" value="0" title="男">

                <input type="radio" name="Gender" value="1" title="女">

            </div>

        </div>

        <div class="layui-form-item layui-form-text">

            <label class="layui-form-label">请填写描述</label>

            <div class="layui-input-block">

                <textarea name="Descirpt" id="Descirpt" 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="gofilter">立即提交</button>

                <button type="reset" class="layui-btn layui-btn-primary">重置</button>

            </div>

        </div>

    </form>

JS脚本

    <script>

        layui.use(['form', 'jquery', 'layer'], function () {

            var form = layui.form;

            var $ = layui.$;

            var layer = layui.layer;

            //可局部刷新的元素 select,radio,checkbox

            form.render();          //刷新全部

            form.render('select');  //刷新select选择框

            form.render('select', 'selectfilter');//刷新layfilter为selectfilter1的select

            //**********************************预设元素属性

            lay-skin   //只对checkbox有效 ，可选switch,primary

            lay-filter //事件过滤器，用于匹配事件的准确性。不仅仅用于form

            lay-verify //规则验证

            lay-verType //不符合规则时显示风格，可选tips，alert,msg(默认)

            lay-submit  //绑定触发提交的元素

            //*************************************事件监控

            //监听的元素有select(选中) ，checkbox（勾选）,swich(开关),radio(选择),submit(提交)

            form.on('select(selectfilter)', function (data) {

                console.log(data.elem);    //原生Dom

                console.log(data.value);   //选中的option的value

                console.log(data.othis);   //美化后Dom

            })

            form.on('radio', function (data) {

                console.log(data.elem);    //原生Dom

                console.log(data.value);   //选中的radio的value

                console.log(data.othis);   //美化后Dom

            })

            //checkbox和switch是一样的

            form.on('checkbox', function (data) {

                console.log(data.elem);           //原生Dom

                console.log(data.elem.checked);   //点击后的状态true,false                console.log(data.othis);          //美化后的Dom

            })

            //submit

            form.on('submit(gofilter)', function (data) {

                console.log(data.field)

                $.post('/Home/AddUserInfo', data.field, function (result) {

                    if (result.IsSuccess === 1) {

                        alert(result.Msg);

                    } else {

                        alert(result.Msg);

                    }

                })

                return false;//这里是拦截layui自带的提交

            })

            //*********************************表单验证

            //required（必填项）phone（手机号）email（邮箱）url（网址）number（数字）date（日期）identity（身份证）

            //也可以自定义，一个简单用户名密码的栗子：

            form.verify({

                validateUserName: [

                    /^[\S]{2,10}$/

                    , '用户名必须2到10位'

                ],

                validateUserPass: [

                    /^[\S]{3,20}$/

                    , '密码必须为3到20位'

                ],

                validateConfPass: function (value) {

                    var pass = $('#userPass').val();

                    if (value != pass) {

                        return '两次密码不一致';

                    }

                },

            });

            //**********************************赋初值，当我们修改或者展示详情时可用

            form.val("formfilter", {

                "Name": "haha" // "name": "value"

                , "Gender": 0        //对应radio的value值，

                , "Role": 3          //对应select下option的value值

                , "LikeRead": true   //对应checkbox

                , "Descirpt": "这里是用户描述哦"  //放在textarea中

            })

            console.log($('#Descirpt').val() + "xxx")  //获取textarea值的方式

        });

    </script>

</body>

</html>

注:这是为了个人查找方便整理的文档，并没有总结完全，查看更多可访问官网http://www.layui.com/doc

layui(五)——form组件常见用法总结的更多相关文章

  1. layui(七)——rate组件常见用法总结

    layui中提供了rate组件,用法很简单,直接上代码. <div id="test1"></div> <script> layui.use(' ...

  2. layui(二)——layer组件常见用法总结

    layer是layui的代表作,功能十分强大,为方便以后快速配置这里对其常见用法做了简单总结 一.常用调用方式 //1.普通消息:alert(content,[options],[yesCallBac ...

  3. layui(四)——table组件常见用法总结

    table是 layui 最核心的组成之一.它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求.支持固定表头.固定行.固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级 ...

  4. layui(三)——laypage组件常见用法总结

    laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染.核心方法: laypage.render(options)  来设置基础参数. 一.laypag ...

  5. layui(六)——upload组件常见用法总结

    layui中提供了非常简单的文件上传组件,这里写了一个上传图片的栗子,上传成功后返回图片在服务器的路径,并设置为页面中img的src属性.因为上传十分简单,没什么可说的,就直接上代码了. html代码 ...

  6. layui(九)——flow组件常见用法总结

    该模块包含 信息流加载 和  图片懒加载  两大核心支持,无论是对服务端.还是前端体验,都有非常大的性能帮助.下边分别给出了这两种技术的使用方法 一.信息流加载 信息流加载的核心方法时  flow.l ...

  7. django框架中的form组件的用法

    form组件的使用 先导入: from django.forms import Form from django.forms import fields from django.forms impor ...

  8. Python - Django - form 组件基本用法

    普通 form 表单的处理: reg.html: <!DOCTYPE html> <html lang="en"> <head> <met ...

  9. layui（一）——layDate组件常见用法

    和 layer 一样,我们可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,可按照实际需求来选择.options整理如下: layui.use('laydate', f ...

随机推荐

  1. Json中Date映射到model

    @DateTimeFormat(pattern="yyyy-MM-dd") private Date nenddate; public Date getNenddate() { r ...

  2. python的生成器与迭代器和可迭代对象

    来简单的说下python中的生成器和可迭代对象以及迭代器的问题.只是简单地记录一下并不涉及太深入的内容. 首先来说一下什么是生成器,先看下面的代码: #_*_ coding:utf-8 _*_ res ...

  3. 【BZOJ2324】[ZJOI2011]营救皮卡丘（网络流，费用流）

    [BZOJ2324][ZJOI2011]营救皮卡丘(网络流,费用流) 题面 BZOJ 洛谷 题解 如果考虑每个人走的路径,就会很麻烦. 转过来考虑每个人破坏的点集,这样子每个人可以得到一个上升的序列. ...

  4. bzoj3514(LCT+主席树)

    题目描述 N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. 题解 对于一个截止时间来说,越晚的变越好. 所以我们可以维护一颗以边的序号为关键字的最大生成树,然后用主席树维 ...

  5. (转）git checkout 撤销修改

    背景:学习git相关命令 git撤销修改和版本回退 git status查看当前仓库的状态 liuzhipeng@exdroid43:~/pad/pad-test$ git status 位于分支 m ...

  6. Vue中data返回对象和返回值的区别

    速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件.因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象 返回对象的时候 <!DOCTYPE ...

  7. 斯坦福大学公开课机器学习： advice for applying machine learning | regularization and bais/variance（机器学习中方差和偏差如何相互影响、以及和算法的正则化之间的相互关系）

    算法正则化可以有效地防止过拟合, 但正则化跟算法的偏差和方差又有什么关系呢?下面主要讨论一下方差和偏差两者之间是如何相互影响的.以及和算法的正则化之间的相互关系 假如我们要对高阶的多项式进行拟合,为了 ...

  8. 3D游戏的角色移动和旋转

    * -----英雄的移动控制 * * * * */ using System.Collections; using System.Collections.Generic; using UnityEng ...

  9. 大型游戏案例UI开发总结_1

    Canvas(画布)中选择Render Mode----Screen Space Camera,为了在摄像机和UI画布之间放置3D物体. Camera中的Projection选择Orthographi ...

  10. HTML学习笔记Day6

    一.元素类型 1.元素类型分类依据和元素类型分类 根据css显示分类,XHTML元素被分为三种类型:块状元素.内联元素.行内块元素.可变元素 2.块状元素 1)块状元素在网页中就是以块的形式显示,所谓 ...