Layui - 示例
示例地址
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 - 示例的更多相关文章
- layui的使用说明
一.定义 layui,是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,跟其他UI框架比较(比如bootstrap.easyui.findui.topu ...
- asp.net core封装layui组件示例分享
用什么封装?自然是TagHelper啊,是啥?自己瞅文档去 在学习使用TagHelper的时候,最希望的就是能有个Demo能够让自己作为参考 怎么去封装一个组件? 不同的情况怎么去实现? 有没有更好更 ...
- LayUI后台管理与综合示例
一.LayUI介绍 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体 ...
- 使用java的MultipartFile实现layui官网文件上传实现全部示例，java文件上传
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. layui文件上传示例地址:https://www. ...
- layui表格和弹出框的简单示例
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- layui的checkbox示例
1.html页面: var isSkipcheckbox = ''; if (appOptions.isSkip != "0") { isSkipcheckbox = 'check ...
- Layui的一点小理解（上）
首先声明这是个人的一点理解,如有不对之处请指正,以下的例子有在官网上看到的,有的是自己写的.还是老规矩最后会附上官网的,如有不明白之处,请查看文档或留言. 既然说Layui,当然要简单的介绍以下什么是 ...
- layui中使用autocomplete.js
前言 在网站找了一大圈都是问题没有答案,记录记录谨防踩坑 layui版本:layui-v1.0.9_rls a(https://github.com/devbridge/jQuery-Autocomp ...
- 使用LayUI操作数据表格
接着 上一篇 继续完善我们的demo,这次我们加一个搜索按钮 搜索 在table标签的上方,加入这样一组html <div class="demoTable"> 搜索商 ...
随机推荐
- codeforces A. Jeff and Digits 解题报告
题目链接:http://codeforces.com/problemset/problem/352/A 题目意思:给定一个只有0或5组成的序列,你要重新编排这个序列(当然你可以不取尽这些数字),使得这 ...
- CodeForces - 426A(排序)
Sereja and Mugs Time Limit: 1000MS Memory Limit: 262144KB 64bit IO Format: %I64d & %I64u Sub ...
- oracle 序列 详解
序列: 是oacle提供的用于产生一系列唯一数字的数据库对象. l 自动提供唯一的数值 l 共享对象 l 主要用于提供主键值 l 将序列值装入内存可以提高访问效率 创建序列: 1. 要有创建 ...
- 学习 BigInteger
以下是摘抄与其他人的: JAVA之BigInteger 用Java来处理高精度问题,相信对很多ACMer来说都是一件很happy的事,简单易懂.用Java刷了一些题,感觉Java还不错,在处理高精度和 ...
- php 增删改查练习
添加界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- Instruments_Activity Monitor使用入门
Activity Monitor,官方解释为:(活动监视器)即实时显示CPU.内存和网络的使用情况,记录由虚拟内存大小测量的系统负载.用一句大白话来说,Activity Monitor类似Window ...
- STL —— STL六大组件
注:以下内容摘自 http://blog.csdn.net/byxdaz/article/details/4633826 STL六大组件 容器(Container) 算法(Algorithm) 迭代器 ...
- mysql安装（Mac平台）
mac平台安装mysql有两种方式: 1)使用官方度dmg安装: 2)使用homebrew方式 本人比较推荐使用homebrew方式安装,省去大多数的麻烦,使用官方dmg方式推荐到官网下载:http: ...
- hdu 4280 最大流sap
模板套起来 1 5 7 //5个结点,7个边 3 3 //坐标 3 0 3 1 0 0 4 5 1 3 3 //相连的结点和流 2 3 4 2 4 3 1 5 6 4 5 3 1 4 4 3 4 2 ...
- loj 1017(dp)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25843 思路:我们可以发现题目与点的X坐标没有关系,于是可以直接对 ...