layui中form表单使用示例-Layui教程-PHP中文网

一、layui简介：

1、layui是一款采用自身模块规范编写的前端 UI 框架，开源的模块化前端 UI 框架，区别于那些基于 MVVM 底层的 UI 框架。

2、优点：原生开发模式、模块化、兼容性强

3、layui可作为 PC网页端后台系统与前台界面的速成开发方案

二、目录结构

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

三、引入方式与表单案例

html>


    <meta>
    <meta>
    <title>layui_learn_one</title>
    <link> 
    <script></script>
    <script>
    layui.use(['form', 'layedit', 'laydate'], function(){
      var form = layui.form
      ,layer = layui.layer
      ,layedit = layui.layedit
      ,laydate = layui.laydate;

      //日期
      laydate.render({
        elem: '#date'
      });
      laydate.render({
        elem: '#date1'
      });

      //创建一个编辑器
      var editIndex = layedit.build('LAY_demo_editor');

      //自定义验证规则
      form.verify({
        title: function(value){
          if(value.length < 5){
            return '标题至少得5个字符啊';
          }
        }
        ,pass: [/(.+){6,12}$/, '密码必须6到12位']
        ,content: function(value){
          layedit.sync(editIndex);
        }
      });

      //监听指定开关
      form.on('switch(switchTest)', function(data){
        layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
          offset: '6px'
        });
        layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
      });

      //监听提交
      form.on('submit(demo1)', function(data){
        layer.alert(JSON.stringify(data.field), {
          title: '最终的提交信息'
        })
        return false;
      });


    });
    </script>

表单集合演示

单行输入框

验证必填项

验证手机

验证邮箱

多规则验证

验证日期

验证链接

验证身份证

自定义验证

请填写6到12位密码

范围