示例地址

http://www.layui.com/demo/

下载地址

http://www.layui.com/

示例代码

<!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">
    <link rel="stylesheet" href="layui/css/layui.css">
<body>

    <div style="width: 1000px; margin: 30px auto;">
        <h1 style="margin-bottom: 20px; padding-bottom: 20px; font-size: 20px; font-weight: 300; color: #999; border-bottom: 1px solid #eee;">layui.form 表单模块 部分演示 - （所有文档都在陆续整理，敬请谅解）</h1>
        <form action="" class="layui-form">
            <ul>
                <li class="layui-form-li">
                    <div class="layui-form-label">
                        <label>用户</label>
                        <input required type="text" name="username" check="username"></div>
                </li>
                <li class="layui-form-li">
                    <div class="layui-form-label">
                        <label>密码</label>
                        <input required type="password" name="password"></div>
                    <div class="layui-inline layui-form-tips">密码强度可以按照需求选择性开启</div>
                </li>
                <li class="layui-form-li">
                    <div class="layui-form-label">
                        <label>邮箱</label>
                        <input required type="text" check="email" name="email"></div>
                </li>
            </li>
            <li class="layui-form-li">
                <fieldset>
                    <legend>爱好</legend>
                    <div class="layui-form-label layui-form-checkbox">
                        <label>音乐</label>
                        <input required type="checkbox" name="love[yinyue]"></div>
                    <div class="layui-form-label layui-form-checkbox">
                        <label>写作</label>
                        <input required type="checkbox" checked name="love[xiezuo]"></div>
                    <div class="layui-form-label layui-form-checkbox">
                        <label>敲代码</label>
                        <input required type="checkbox" name="love[daima]"></div>
                    <div class="layui-form-label layui-form-checkbox">
                        <label>旅行</label>
                        <input required type="checkbox" name="love[lvxing]"></div>
                    <div class="layui-form-label layui-form-checkbox">
                        <label>做自己想做的事咯</label>
                        <input required type="checkbox" name="love[daima]"></div>
                </fieldset>
            </li>
            <li class="layui-form-li">
                <div class="layui-form-label">
                    <label>省份</label>
                    <select required name="province">
                        <option value="浙江省">浙江省</option>
                        <option value="江西省">江西省</option>
                        <option value="上海市">上海市</option>
                        <option value="福建省">福建省</option>
                        <option value="湖北省">湖北省</option>
                        <option value="江苏省">江苏省</option>
                        <option value="安徽省">安徽省</option>
                        <option value="北京市">北京市</option>
                        <option value="香港">香港</option>
                        <option value="澳门">澳门</option>
                        <option value="台湾省">台湾省</option>
                    </select>
                </div>
                <div class="layui-form-label">
                    <label>城市/县</label>
                    <select required name="city">
                        <option value="杭州">杭州</option>
                        <option value="南昌">南昌</option>
                    </select>
                    <select required name="village">
                        <option value="中关村">中关村</option>
                        <option value="华西村">华西村</option>
                    </select>
                </div>
            </li>
            <li class="layui-form-li">
                <div class="layui-form-label layui-form-area">
                    <label>内容</label>
                    <textarea required name="content"></textarea>
                </div>
            </li>
            <li class="layui-form-li">
                <button class="layui-form-button">提交</button>
            </li>
        </ul>
    </form>
</div>

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

<script>
layui.use('form', function(){
  var form = layui.form;

  //验证
  form.check({
    custom: {
      username: function(value){
        if(value.replace(/\s/g, '') === ''){
          return '用户名不能为空';
        }
      }
    }
  }, function(data){
    layer.msg(JSON.stringify(data), {time: 6000});
  });

  //密码强度
  form.pass();

  //多选框
  form.checkbox();

  //下拉选择框
  form.select();

});
</script>
</body>
</html>

Layui - 示例的更多相关文章

  1. layui的使用说明

    一.定义 layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,跟其他UI框架比较(比如bootstrap.easyui.findui.topu ...

  2. asp.net core封装layui组件示例分享

    用什么封装?自然是TagHelper啊,是啥?自己瞅文档去 在学习使用TagHelper的时候,最希望的就是能有个Demo能够让自己作为参考 怎么去封装一个组件? 不同的情况怎么去实现? 有没有更好更 ...

  3. LayUI后台管理与综合示例

    一.LayUI介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体 ...

  4. 使用java的MultipartFile实现layui官网文件上传实现全部示例，java文件上传

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. layui文件上传示例地址:https://www. ...

  5. layui表格和弹出框的简单示例

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. layui的checkbox示例

    1.html页面: var isSkipcheckbox = ''; if (appOptions.isSkip != "0") { isSkipcheckbox = 'check ...

  7. Layui的一点小理解（上）

    首先声明这是个人的一点理解,如有不对之处请指正,以下的例子有在官网上看到的,有的是自己写的.还是老规矩最后会附上官网的,如有不明白之处,请查看文档或留言. 既然说Layui,当然要简单的介绍以下什么是 ...

  8. layui中使用autocomplete.js

    前言 在网站找了一大圈都是问题没有答案,记录记录谨防踩坑 layui版本:layui-v1.0.9_rls a(https://github.com/devbridge/jQuery-Autocomp ...

  9. 使用LayUI操作数据表格

    接着 上一篇 继续完善我们的demo,这次我们加一个搜索按钮 搜索 在table标签的上方,加入这样一组html <div class="demoTable"> 搜索商 ...

随机推荐

  1. ARM 处理器的几个相关术语

    生产ARM的厂商很多,自然ARM处理器的名字就五花八门.但是,它们有些共同点,那就是:架构和核心. 架构这个概念太宽不太懂,一般不同的架构会有不同的指令集,在不同的架构下面还可以有多种核心.核心就是指 ...

  2. Windows下尝试PHP7提示丢失VCRUNTIME140.DLL的问题解决

    前天PHP7.0.0正式版发布了,有一些比较好的改进,官方也说速度比php5.6快了两倍,性能上有了很大提升,并且也发布了从php5.x向php7迁移的问题,所以今后php网站迁移后能够大幅度的提升网 ...

  3. POJ 2429 GCD & LCM Inverse （Pollard rho整数分解+dfs枚举）

    题意:给出a和b的gcd和lcm,让你求a和b.按升序输出a和b.若有多组满足条件的a和b,那么输出a+b最小的.思路:lcm=a*b/gcd   lcm/gcd=a/gcd*b/gcd 可知a/gc ...

  4. SpringJDBC的简单应用

    此处写上应用JdbcTemplate的dao操作数据库的一些代码(含基本的增删改查,注:重点是查询出多条语句的写法): package org.sakaiproject.zhaorui.dao.imp ...

  5. Fence Repair（poj 3253）

    题意: 有一个农夫要把一个木板钜成几块给定长度的小木板,每次锯都要收取一定费用,这个费用就是当前锯的这个木版的长度 给定各个要求的小木板的长度,及小木板的个数n,求最小费用 提示: 以 3 5 8 5 ...

  6. java 学习之路

    一.基础篇 1.1 JVM 1.1.1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收 http://www.jcp.org/en/jsr/detail?id=133 http://i ...

  7. Jil序列化JSON

    使用Jil序列化JSON提升Asp.net web api 性能   JSON序列化无疑是Asp.net web api 里面性能提升最重要的一环. 在Asp.net web api 里面我们可以插入 ...

  8. wp7 BaseDictionary<TKey, TValue>

    /// <summary>/// Represents a dictionary mapping keys to values./// </summary>/// /// &l ...

  9. php中base64_decode与base64_encode加密解密函数

    php中base64_decode与base64_encode加密解密函数,实例分析了base64加密解密函数的具体用法,具有一定的实用价值,需要的朋友可以参考下 本文实例讲述了php中base64_ ...

  10. kmp算法详解

    转自:http://blog.csdn.net/ddupd/article/details/19899263 KMP算法详解 KMP算法简介: KMP算法是一种高效的字符串匹配算法,关于字符串匹配最简 ...