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"> 搜索商 ...
随机推荐
- Linux系统排查1——内存篇
常见工作中,计算机系统的资源主要包括CPU,内存,硬盘以及网络,过度使用这些资源将使系统陷入困境.本系列一共四篇博文,结合我在实习期间的学习,介绍一些常见的Linux系统排障工具及方法. 第1篇——内 ...
- DP:Miking Time(POJ 3616)
2015-09-21 奶牛挤奶 题目大意就是这只Bessie的牛产奶很勤奋,某农民有一个时刻表,在N时间内分成M个时间段,每个时间段Bessie会一直产奶,然后有一定的效益,并且Bessie产奶后要休 ...
- July 31st, Week 32nd Sunday, 2016
If you wept for the missing sunset, you would miss all the shining stars. 如果你为错过夕阳而哭泣,那你有可能也会错过灿烂的星空 ...
- July 17th, Week 30th Sunday, 2016
You are beautiful, but that is not why I love you. 你如此美丽,但我并非因此而爱你. Although we have always been tol ...
- Linux常用命令总结--分布式应用部署与监控
1 kill所有相关进程ps -ef | grep -i 进程名 | grep -v "grep" | awk '{print $2}' |xargs kill 2 查询当前用户占 ...
- C++复制（拷贝）构造函数详解
本文转载自 http://blog.csdn.net/lwbeyond/article/details/6202256,在此感谢作者 CTemp B(A); //复制构造函数,C++风格的 ...
- Ubuntu 15.10系统安装后要做的15件事
Ubuntu 15.04发布了,带来了很多新特性,同样也依然带着很多不习惯的东西,所以装完系统后还要进行一系列的优化. 1.删除libreoffice libreoffice虽然是开源的,但是Java ...
- div img居中的方式
想让div中的img水平和垂直都居中,可以将img放在div中,img的样式:height:100%;width:100%; 外部定义div的宽度和高度,然后定义line-height行高,div外部 ...
- UVa 11437:Triangle Fun（计算几何综合应用，求直线交点，向量运算，求三角形面积）
Problem ATriangle Fun Input: Standard Input Output: Standard Output In the picture below you can see ...
- laravel 安装及入门
Composer安装过程 一.安装Composer 首先你需要安装Composer,Composer是PHP依赖管理工具,Laravel框架就是使用 Composer 执行安装和依赖管理. 注: ( ...