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>
上一篇:原生js 遍历文件夹分析xml并保存


下一篇:ueditor的过滤、转义、格式丢失问题