layui(五)——form组件常见用法总结
form 是我们非常看重的一块。layui中的form实现全自动的初始渲染,和基于事件驱动的接口书写方式。我整理了layui中form的配置。下边直接给一个栗子,后台采用.net MVC,除了razor模板中用到了一点后台的内容,其他都是layui中的内容,这里就不粘后台代码了:
HTML文本
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<script src="~/Content/layui/layui.js"></script>
<link href="~/Content/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
<form class="layui-form" action="/Home/AddUserInfo" method="get" lay-filter="formfilter">
<!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="Name" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-block">
<select name="Role" lay-filter="selectfilter">
@foreach (var item in ViewBag.RoleList)
{
<option value="@item.Id">@item.RoleName</option>
}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<input value="1" type="checkbox" name="LikeWrite" title="写作">
<input value="2" type="checkbox" name="LikeRead" title="阅读">
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="Gender" value="0" title="男">
<input type="radio" name="Gender" value="1" title="女">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">请填写描述</label>
<div class="layui-input-block">
<textarea name="Descirpt" id="Descirpt" 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="gofilter">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
JS脚本
<script>
layui.use(['form', 'jquery', 'layer'], function () {
var form = layui.form;
var $ = layui.$;
var layer = layui.layer;
//可局部刷新的元素 select,radio,checkbox
form.render(); //刷新全部
form.render('select'); //刷新select选择框
form.render('select', 'selectfilter');//刷新layfilter为selectfilter1的select //**********************************预设元素属性
lay-skin //只对checkbox有效 ,可选switch,primary
lay-filter //事件过滤器,用于匹配事件的准确性。不仅仅用于form
lay-verify //规则验证
lay-verType //不符合规则时显示风格,可选tips,alert,msg(默认)
lay-submit //绑定触发提交的元素 //*************************************事件监控
//监听的元素有select(选中) ,checkbox(勾选),swich(开关),radio(选择),submit(提交)
form.on('select(selectfilter)', function (data) {
console.log(data.elem); //原生Dom
console.log(data.value); //选中的option的value
console.log(data.othis); //美化后Dom
}) form.on('radio', function (data) {
console.log(data.elem); //原生Dom
console.log(data.value); //选中的radio的value
console.log(data.othis); //美化后Dom
}) //checkbox和switch是一样的
form.on('checkbox', function (data) {
console.log(data.elem); //原生Dom
console.log(data.elem.checked); //点击后的状态true,false console.log(data.othis); //美化后的Dom
}) //submit
form.on('submit(gofilter)', function (data) {
console.log(data.field)
$.post('/Home/AddUserInfo', data.field, function (result) {
if (result.IsSuccess === 1) {
alert(result.Msg);
} else {
alert(result.Msg);
}
})
return false;//这里是拦截layui自带的提交
}) //*********************************表单验证
//required(必填项)phone(手机号)email(邮箱)url(网址)number(数字)date(日期)identity(身份证)
//也可以自定义,一个简单用户名密码的栗子:
form.verify({
validateUserName: [
/^[\S]{2,10}$/
, '用户名必须2到10位'
],
validateUserPass: [
/^[\S]{3,20}$/
, '密码必须为3到20位'
],
validateConfPass: function (value) {
var pass = $('#userPass').val();
if (value != pass) {
return '两次密码不一致';
}
},
}); //**********************************赋初值,当我们修改或者展示详情时可用
form.val("formfilter", {
"Name": "haha" // "name": "value"
, "Gender": 0 //对应radio的value值,
, "Role": 3 //对应select下option的value值
, "LikeRead": true //对应checkbox
, "Descirpt": "这里是用户描述哦" //放在textarea中
})
console.log($('#Descirpt').val() + "xxx") //获取textarea值的方式
});
</script>
</body>
</html>
注:这是为了个人查找方便整理的文档,并没有总结完全,查看更多可访问官网http://www.layui.com/doc
layui(五)——form组件常见用法总结的更多相关文章
- layui(七)——rate组件常见用法总结
layui中提供了rate组件,用法很简单,直接上代码. <div id="test1"></div> <script> layui.use(' ...
- layui(二)——layer组件常见用法总结
layer是layui的代表作,功能十分强大,为方便以后快速配置这里对其常见用法做了简单总结 一.常用调用方式 //1.普通消息:alert(content,[options],[yesCallBac ...
- layui(四)——table组件常见用法总结
table是 layui 最核心的组成之一.它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求.支持固定表头.固定行.固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级 ...
- layui(三)——laypage组件常见用法总结
laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染.核心方法: laypage.render(options) 来设置基础参数. 一.laypag ...
- layui(六)——upload组件常见用法总结
layui中提供了非常简单的文件上传组件,这里写了一个上传图片的栗子,上传成功后返回图片在服务器的路径,并设置为页面中img的src属性.因为上传十分简单,没什么可说的,就直接上代码了. html代码 ...
- layui(九)——flow组件常见用法总结
该模块包含 信息流加载 和 图片懒加载 两大核心支持,无论是对服务端.还是前端体验,都有非常大的性能帮助.下边分别给出了这两种技术的使用方法 一.信息流加载 信息流加载的核心方法时 flow.l ...
- django框架中的form组件的用法
form组件的使用 先导入: from django.forms import Form from django.forms import fields from django.forms impor ...
- Python - Django - form 组件基本用法
普通 form 表单的处理: reg.html: <!DOCTYPE html> <html lang="en"> <head> <met ...
- layui(一)——layDate组件常见用法
和 layer 一样,我们可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,可按照实际需求来选择.options整理如下: layui.use('laydate', f ...
随机推荐
- CNN卷积神经网络人脸识别
图片总共40个人,每人10张图片,每张图片高57,宽47.共400张图片. 读取图片的py文件 import numpyimport pandasfrom PIL import Imagefrom k ...
- Codeforces Round #543 (Div. 2, based on Technocup 2019 Final Round)
A. Technogoblet of Fire 题意:n个人分别属于m个不同的学校 每个学校的最强者能够选中 黑客要使 k个他选中的可以稳被选 所以就为这k个人伪造学校 问最小需要伪造多少个 思路:记 ...
- Codeforces1023F Mobile Phone Network 【并查集】【最小生成树】
题目大意: 给一些没安排权值的边和安排了权值的边,没被安排的边全要被选入最小生成树,问你最大能把它们的权值和安排成多少.题目分析:假设建好了树,那么树边与剩下的每一条边都能构成一个环,并且非树边的权值 ...
- 安卓Android基础四天
网页源码查看器 HttpURLConnection:用于发送和接受数据 ScrollView只能由一个孩子 消息机制的写法(***) anr Application not response 应用无响 ...
- Matplotlib学习---matplotlib里颜色,标记,线条类型参数的选择(colors, markers, line styles)
颜色(Colors): 基础颜色: character color 'b' blue 'g' green 'r' red 'c' cyan 'm' magenta 'y' yellow 'k' bla ...
- Logger.error方法之打印错误异常的详细堆栈信息
一.问题场景 使用Logger.error方法时只能打印出异常类型,无法打印出详细的堆栈信息,使得定位问题变得困难和不方便. 二.先放出结论 Logger类下有多个不同的error方法,根据传入参数的 ...
- Linux 多网卡绑定bond
mode=0:负载均衡模式,增加带宽,两块网卡使用的是同一个MAC地址,所以必须配置网卡相连的交换机,这两个端口应采用聚合方式. mode=1:主备模式,一个线断了,另一条自动备援. mode=6:负 ...
- 【BZOJ1831】[AHOI2008]逆序对(动态规划)
[BZOJ1831][AHOI2008]逆序对(动态规划) 题面 BZOJ 洛谷 题解 显然填入的数拎出来是不降的. 那么就可以直接大力\(dp\). 设\(f[i][j]\)表示当前填到了\(i\) ...
- [SPOJ913]QTREE2 - Query on a tree II【倍增LCA】
题目描述 [传送门] 题目大意 给一棵树,有两种操作: 求(u,v)路径的距离. 求以u为起点,v为终点的第k的节点. 分析 比较简单的倍增LCA模板题. 首先对于第一问,我们只需要预处理出根节点到各 ...
- NOIp2018爆零记
Day-2~Day0 考前抱佛脚,赶紧刷刷各种模板 Day 1 在开考之前打好了拍子模板,然后试题密码就发下来了(这是我前面的神仙打了\(100\)多行\(emacs\)的配置\(QAQ\)). 先按 ...