示例地址
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>