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"> 搜索商 ...
随机推荐
- NSUrlConnection 和 NSUrlRequest 的关系
开始看到这2个名字,总感觉NSUrlConnection才是主要的网络请求类,其实不是,先看官方文档 An NSURLConnection object lets you load the conte ...
- Android measure和layout的一点理解
首先,推荐文章,http://blog.csdn.net/hqdoremi/article/details/9980481,http://www.docin.com/p-571954086.html ...
- iOS UITableView 的beginUpdates和endUpdates
在官方文档中是这样介绍beginUpdates的 Call this method if you want subsequent insertions, deletion, and selection ...
- 转mysql存储引擎memory，ndb，innodb之选择
1 mysql的innodb和cluster的NDB引擎都支持事务,在有共同的特性外,也有不同之处:以mysql cluster NDB 7.3和MySQL 5.6之InnoDB为例:ndb7.3基于 ...
- 手把手教你学会 Emacs 定制
Table of Contents 1 前言 2 配置Emacs 2.1 设置界面 2.2 全屏以及最大化 2.3 设置周边 2.4 显示时间设置 2.5 设置日历 2.6 设置符合个人的操作习惯 2 ...
- MVC学习笔记---MVC导出excel（数据量大，非常耗时的，异步导出）
要在ASP.NET MVC站点上做excel导出功能,但是要导出的excel文件比较大,有几十M,所以导出比较费时,为了不影响对界面的其它操作,我就采用异步的方式,后台开辟一个线程将excel导出到指 ...
- Android源码编译
参考百度文章: http://jingyan.baidu.com/article/a501d80ce61ad0ec630f5e0b.html
- Linux查看硬件配置信息
转自:http://blog.163.com/yang_jianli/blog/static/1619900062010391127338/ 一:查看cpu more /proc/cpuinfo | ...
- Android 开发 --Unable to resolve target 'android-19'
Android 开发 --Unable to resolve target 'android-19' http://blog.csdn.net/love_javc_you/article/detail ...
- 用PHP语言做网站常见漏洞有哪些?
第一:SQL注入漏洞 在进行网站开发的时候,程序员由于对用户输人数据缺乏全面判断或者过滤不严导致服务器执行一些恶意信息,比如用户信息查询等.黑客可以根据恶意程序返回的结果获取相应的信息.这就是所 ...