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"> 搜索商 ...
随机推荐
- mysql 我的学习
安装要求 安装环境:CentOS-6.3安装方式:源码编译安装 软件名称:mysql-cluster-gpl-7.2.6-linux2.6-x86_64.tar.gz下载地址:http://mysql ...
- 快速排序模板qsort（转载）
qsort 用 法: void qsort(void *base, int nelem, int width, int (*fcmp)(const void *,const void *)); 各 ...
- Greedy:三角形问题
题目大意:有n根长度的为a1,a2....an的棒子,如果棒子可以组成三角形,求这些棒子能组成的三角形的最大周长? 这一题,一般人只能想到三重循环,当然我们是CS专业的,不能这样想,其实这题可以用DP ...
- 谈JavaScript代码封装
前言 也算老生常谈的问题了,再深入搞一搞怎么玩儿封装,如果看到这篇文章的你,正好你也是追求完美的代码洁癖狂者,那么这篇文章相信非常适合你. 举一个例子,编写一个Person类,具有name和birth ...
- codeigniter 对数据库的常用操作
codeigniter (CI)是一个优秀.敏捷的PHP开源框架,尤其封装了对数据库的操作,很方便,以下是php ci常用的数据库操作,作个记录: /* ======================= ...
- 关于WM_CTLCOLOREDIT的处理的一些问题
在为duilib封装系统控件的过程中, 再一次遇到了系统EDIT控件文字颜色/文字背景颜色的处理问题. 不要小看这个消息, 她很可能不会让你如愿以偿. 其实我要的目的很简单: 1. 改变文字颜色 ...
- Java Hour 47 WeatherInfo 保存到数据库
经历了上周简单的休整以后,我们继续Hibernate 之旅. 保存到数据库 private void saveWeatherInfo(Weatherinfo weatherInfo) { // Sav ...
- 1、揭秘通用平台的 HttpClient （译）
原文链接:Demystifying HttpClient APIs in the Universal Windows Platform 正打算翻译这篇文章时,发现园子里已经有朋友翻译过了,既然已经开始 ...
- Android：dimen尺寸资源文件的使用
dimen.xml在values文件夹下面 <resources> <!-- Default screen margins, per the Android Design guide ...
- Dialog对话框
1.显示内容 AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.setTitle(&q ...