layUi框架入门篇（三）

部分Js代码拆解分析

上一次的笔记中初步使用了官方文档中的示例在自己的项目中跑了一遍，成功，而且功能很完善。视觉效果也挺不错，HTML和CSS部分的引用代码没有难点，今天就来分析一下JS中的代码实现以及部分控件的功能实现。
首先贴出JS中的代码：

<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>

layui.use()不用说，引入依赖模块[‘form’, ‘layedit’, ‘laydate’]并赋值调用相应模块接口，首先来看laydate这个模块：

  laydate.render({
    elem: '#date'
  });
  函数原型：laydate.render([options]);
  options为控件参数。

从示例中可以看出空间参数才用key/value的赋值形式，laydate有一些基础参数（参考官网的开发文档）

elem：指定元素 ，‘#date’是指id为date的元素。

type：控件选择类型。相当于选择这个日期控件是选择年呢还是年月呢还是年月日呢？就类似于java里的日期类的format，指定一个日期类型。
type也有一些参数选择：

type可选值	名称	用途
year	年选择器	只提供年列表选择
month	年月选择器	只提供年、月选择
date	日期选择器	可选择：年、月、日。type默认值，一般可不填
time	时间选择器	只提供时、分、秒选择
datetime	日期时间选择器	可选择：年、月、日、时、分、秒

range：开启左右面板范围选择 。类型：Boolean/String，默认值：false

如果设置 true，将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。emmmm我没怎么懂这个是啥，不过感觉不太重要，结合具体的控件看看就好。

下面真的还有多参数，具体可以参考官网的对应开发文档，都比较简单易懂，还可以定义一些回调函数，非常方便

接下来来看看编辑器模块’layedit’：

var editIndex = layedit.build('LAY_demo_editor');

函数原型：layedit.build(id,options)

id即为元素id，options和前面的laydate的options一样为编辑框的基本参数，也同样才用key/value的形式赋值。
至于 var editIndex = layedit.build(‘LAY_demo_editor’);的操作是将用于得到build方法返回的索引，嗯，我目前也不懂可以干啥，不过官方文档中说也提供很多编辑方法，非常实用：

方法名	描述
var index = layedit.build(id, options)	用于建立编辑器的核心方法，index：即该方法返回的索引
layedit.set(options)	设置编辑器的全局属性 即上述build方法的options
layedit.getContent(index)	获得编辑器的内容，参数 index： 即执行layedit.build返回的值
layedit.getText(index)	获得编辑器的纯文本内容，参数 index： 同上
layedit.sync(index)	用于同步编辑器内容到textarea（一般用于异步提交），参数 index： 同上
layedit.getSelection(index)	获取编辑器选中的文本 ，参数 index： 同上

关于编辑器的基础设置这里就不赘述了，和laydate的形式一样，具体可以参考官方开发文档

接下来就是自定义验证规则：

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

这是表单模块中提供的自定义验证规则，先让我们来看看简单的，即layui已经帮我们集成的验证规则，只需要在表单元素上加上lay-verify=”value”即可，value可以是一个也可以是多个，例如：

type="text" lay-verify="email"> 

还同时支持多条规则的验证，如下：
type="text" lay-verify="required|phone|number">

目前layui内置的验证属性：
required（必填项）
phone（手机号）
email（邮箱）
url（网址）
number（数字）
date（日期）
identity（身份证）

同时也支持自定义规则：

layui.code
form.verify({
  username: function(value, item){ //value：表单的值、item：表单的DOM对象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用户名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用户名首尾不能出现下划线\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用户名不能全为数字';
    }
  }

  //我们既支持上述函数式的方式，也支持下述数组的形式
  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密码必须6到12位，且不能出现空格'
  ] 
});  

参考官网的模型，form.verify(options);中也是才用key/value的形式，
例如 username:function(value,item){}中username是这个验证的名字，function即验证体，观察发现验证体可能有两种，一种是function（value，item）{}的方法体形式（其中value是表单元素中的值，item是元素对象，可以不填好像，填的话DOM对象也很好提取的），还有一种是[reg,error]的形式，即[正则表达式，错误提示文本].方法体中的错误提示文本则才用return的形式返回。

最后是表单的监听：

  //监听指定开关
  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;
  });

函数原型：form.on(‘event(过滤器值)’, callback);

event	描述
select	监听select下拉选择事件
checkbox	监听checkbox复选框勾选事件
switch	监听checkbox复选框开关事件
radio	监听radio单选框事件
submit	监听表单提交事件

这些是form专属的event的值
默认是监听所有元素，如果监听个别元素，可以用事件选择器，同时指定过滤器的值：

例如：
<select lay-filter="test">select>

其中lay-filter=“XXX”即是过滤器值。
在回调函数中定义事件监听的操作即可。

今天的学习记录就到这里吧，嗯，作为一个前端小白的我在慢慢理解慢慢成长。