4003—layUI随笔

1、【form】元素

<div class="site-title">
        	<fieldset>><legend><a name="use">小睹为快</a></legend></fieldset>        	
        </div>	

    	<div class="site-text site-block">
        	<form class="layui-form"	action="">

            	<div class="layui-form-item">
                	<label class="layui-form-label">输入框</label>
                    <div class="layui-input-block">
                    	<input type="text" name="title" required lay-verify="reqquired" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                
                <div class="layui-form-item">
                	<label class="layui-form-label">密码框</label>
                    <div class="layui-input-inline">
                    	<input type="password" name="password" required lay-verify="required" lay-verType="tips" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
                
                <div class="layui-form-item">
                	<label class="layui-form-label">选择框</label>
                	<div class="layui-input-block">
                    	<select name="city" lay-verify="required">
                    		<option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        
                        </select>
                    </div>
                </div>
                
                <div class="layui-form-item">
                	<label class="layui-form-label">复选框</label>
                	<div class="layui-input-block">
                    	<input type="checkbox" name="like[write]" title="写作">
                        <input type="checkbox" name="like[read]" title="阅读" checked>
                        <input type="checkbox" name="like[dai]" title="发呆">
                    </div>
                </div>
                
                <div class="layui-form-item">
                	<label class="layui-form-label">开关</label>
                	<div class="layui-input-block">
                    	<input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" lay-filter="switchTest" value="1">
                    </div>
                </div>
                
                <div class="layui-form-item">
                	<label class="layui-form-label">单选框</label>
                	<div class="layui-input-block">
                    	<input type="radio" name="sex" value="男" title="男">
                    	<input type="radio" name="sex" value="女" title="女" checked>
                    </div>
                </div>
                
                <div class="layui-form-item layui-form-text" >
                	<label class="layui-form-label">文本域</label>
                	<div class="layui-input-block">
                		<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>                    
                    </div>
                </div>
                
                <div class="layui-form-item">
                	<div class="layui-input-block">
                		<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    	<button type="reset" class="layui-btn  layui-btn-primary">重置</button>
                    </div>
                </div>

2、【form】更新渲染

页面元素设计完成后，要使用JS刷新form，否则，select，radio等元素无法显示。

</form>
<script src="layui.js"></script>
<script>
 	layui.use('form',function(){
					
			var form=layui.form;

			//form events;	
			form.render();					
	});
</script>

2.1—局部渲染

       可局部渲染的元素

•        单选框——radio
•        复选框——checkbox
•        下拉列表——switch   

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染

2.2—form提供的JS接口精确控制。目前我们可支持的属性如下表所示：

3、动态新增节点

     在html、JS文件中动态新增节点，需要强制初始化才能启用节点的效果    

var parentN=document.getElementById('user-controlbox');
parentN.insertAdjacentHTML('beforeEnd', '<li class="layui-nav-item" id="user-set-login"><a href="javascript:;">登录'+											
					'</a><dl class="layui-nav-child">'+
					'          <dd><a href="">项目一</a></dd>'+
					'          <dd><a href="">项目二</a></dd>'+
        			'</dl></li>');
				
parentN.insertAdjacentHTML('beforeEnd','<li class="layui-nav-item"><a href="javascript:;">注册</a></li>');				
				
layui.use('element',function(){					
		layui.element.init();
});

4、lay-verify定义
lay-verify：是表单验证的关键字 
有以下值供选择：

required (必填项)
phone（手机号）
email（邮箱）
url（网址）
number（数字）
date（日期）
identity(身份证)
自定义值
同时支持多条规则的验证： 
格式：lay-verify=”验证A|验证B” 
如：lay-verify=”required|phone|number”

 

 

 

 

5、表格元素