投稿
  1. 首页
  2. 框架

layui的表单验证，怎么通过手动触发

水泵扬程计算•2023-4-29•框架•阅读65

layui的表单验证，怎么通过手动触发,第1张

找到formjs文件，给form拓展方法

参数是你表单所在容器id

返回结果是是否通过验证

uprototypedoVerify=function(z){

var e = null,

a = fconfigverify,

s = "layui-form-danger",

c = t("#"+z),

d = cfind("[lay-verify]");

layuieach(d, function (l, r) {

var o = t(this),

c = oattr("lay-verify")split("|"),

u = oattr("lay-verType"),

d = oval();

if (oremoveClass(s), layuieach(c, function (t, l) {

var c, f = "", v = "function" == typeof a[l];

if (a[l]) {

var c = v f = a[l](d, r) : !a[l][0]test(d);

if (f = f || a[l][1], "required" === l && (f = oattr("lay-reqText") || f), c) return "tips" === u itips(f, function () {

return "string" == typeof oattr("lay-ignore") || "select" !== rtagNametoLowerCase() && !/^checkbox|radio$/test(rtype) o : onext()

}(), {tips: 1}) : "alert" === u ialert(f, {title: "提示", shadeClose: !0}) : imsg(f, {

icon: 5,

shift: 6

}), nandroid || nios || setTimeout(function () {

rfocus()

}, 7), oaddClass(s), e = !0

}

}), e) return e

});

return !e;

}

使用：

layuiformdoVerify(id);

js如下：

///<reference path="jquery-180minjs" />

//加载函数

$(function () {

    Nbookload();

});

var Nbook =

{

    load: function () {

        Nbookclci();

    },

    selectDat: function () {

        var val;

        $ajax({

            type: "post",

            dataType: "json",

            data: { "method": "selectData", "Name": "'" + $trim($("#Name")val())+"'" },

            url: "ashx/testashx",

            success: function (data) {

                if (data != null) {

                    var html = "";

                    val = eval(data);

                    //consolelog(booklength);

                    //for (var i = 0; i < booklength; i++) {

                    //    html += "<ul class='main_Ul'><li>" + book[i]name + "</li><li>" + book[i]sch_id + "</li><li>" + book[i]sex + "</li><li>" + book[i]isOk + "</li></ul>";

                    //}

                    //$("main")html(html);

                    layuiuse('table', function () {

                        var table = layuitable;

                        //展示已知数据

                        tablerender({

                            elem: '#socialList'

                            , cols: [[ //表头

                                { type: 'checkbox', fixed: 'left' },

                                { field: 'name', title: '姓名', sort: true, fixed: 'left', unresize: true, sort: true, totalRowText: '合计' }

                                , { field: 'sch_id', title: '学校ID', sort: true, totalRow: true }

                                , { field: 'sex', title: '性别', sort: true, totalRow: true }

                                , { field: 'isOk', title: '是否OK' }

                            ]],

                            data: val

                            , even: true

                            , page: true //是否显示分页

                            , toolbar: true //开启工具栏，此处显示默认图标，可以自定义模板，详见文档

                            , limits: [3, 5, 7, 8, 10, 50]

                            , limit: 8 //每页默认显示的数量

                            , cellMinWidth: 80

                            , height: 'full-515'//设置表格最大高度

                            , totalRow: true//开启合计

                        });

                    });

                }

            }

        });

    },

    clci: function ()

    {

        if ($trim($("#Name")val()) == "")

        {

            NbookselectDat();

        }

        $("input[type='button']")click(function () {

            NbookselectDat();

        });

    }

}

页面如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="myselectaspxcs" Inherits="WebTestDemosmyselect" %>

<!DOCTYPE html>

<html xmlns=">

最近抽空总结了下layui中table表格的相关配置，解释的比较全面，可供大家参考，页面效果如下：

table表格html部分：

table表格渲染js (包含分页器及返回数据处理等）:

table表格 *** 作列事件：

在table标签的上方，加入这样一组html

<div class="demoTable">

搜索商户： <div class="layui-inline">

<input class="layui-input" name="keyword" id="demoReload" autocomplete="off">

</div>

<button class="layui-btn" data-type="reload">搜索</button></div>

在js加入初始化代码和定义加载方法

layuiuse('table', function(){

var table = layuitable;

//方法级渲染

tablerender({

elem: '#LAY_table_user'

,url: 'UVServlet'

,cols: [[

{checkbox: true, fixed: true}

,{field:'id', title: 'ID', width:80, sort: true, fixed: true}

,{field:'aid', title: '商户', width:80, sort: true}

,{field:'uv', title: '访问量', width:80, sort: true,edit:true}

,{field:'date', title: '日期', width:180}

,{field:'datatype', title: '日期类型', width:100}

]]

,id: 'testReload'

,page: true

,height: 600

});

var $ = layui$, active = {

reload: function(){

var demoReload = $('#demoReload');

tablereload('testReload', {

where: {

keyword: demoReloadval()

}

});

}

};

)};

绑定click点击事件

$('demoTable layui-btn')on('click', function(){ var type = $(this)data('type');

active[type] active[type]call(this) : '';

});

此时点击查询按钮，会将keyword这个关键字传到后端，接下来就是自己处理查询关键字业务了。

到目前为止，搜索也有了，分页也有了,对了，分页会自动传到后端page,limit2个值到后台，相当于（pageindex,pagesize）

js实现：

layuiuse(['table','form'],

function()

{

$

=

layuijquery;

table

=

layuitable;

tableIns

=

initTable();

});

//加载列表

function

initTable(){

//

执行渲染

tableIns

=

tablerender({

id:

'idTest',

elem

:

'#deviceTable',

//

指定原始表格元素选择器（推荐id选择器）

size:

'lg',

height

:

'full-20',

//

容器高度

url

:

'/csCloud-admin/deviceController/getDeviceListdo',

where:

{

'orgId':$("#orgId")val(),

'coldNum':$("#coldNum")val(),

'devType':$("#devType")val(),

'isUsed':$("#isUsedId")val()

},

method

:

'post',

cols

:

[

[

//

标题栏

{

field

:

'rownum',

title

:

'序号',

width

:

100,

sort

:

true

},

{

field

:

'devNum',

title

:

'设备编号',

width

:

200

},

{

field

:

'devAlias',

title

:

'设备别名',

width

:

100

},

{

field

:

'devTypeVal',

title

:

'设备类型',

width

:

100

},

{

field

:

'devModel',

title

:

'设备型号',

width

:

100

},

{

field

:

'stateVal',

title

:

'设备状态',

width

:

100

},

{

field

:

'coldNum',

title

:

'冷库编号',

width

:

100

},

{

field

:

'orgName',

title

:

'所属机构',

width

:

300

},

{

field

:

'isUsedValue',

title

:

'状态',

width

:

100

},

{

fixed

:

'right',

width

:

300,

align:'center',

toolbar

:

'#barDemo'

}

]

],

//

设置表头

page

:

true,

limits

:

[

10,30,

60,

90,

150,

300

],

limit

:

10

});

return

tableIns;

}

jsp实现：

<div

class="layui-fluid">

<div

class="layui-row">

<div

class="layui-col-lg12">

<table

id="deviceTable"></table>

</div>

</div>

</div>

以上这篇layui实现table加载的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:layui的table单击行勾选checkbox功能方法layui实现点击按钮给table添加一行layui结合form,table的全选、反选v10示例讲解

使用左右穿梭框的时候，layui引用layuialljs，这样不用再加thirdlib/transferjs，可以直接调用modules下的

打开CSDN，阅读体验更佳

layui从入门到使用layui复选框checkbox_Spring tt的博客_lay

在这说的是layui的form表单里面的复选框 怎么使用首先在layui打开文档,找到页面元素, 在这里插入描述 就可以看到,在使用form表单之前需要在容器中添加class=“layui-form”在你的HTM的盒子class里面添加上layui-form,如果其他内容

layui复选框_淡淡人生过的博客

layui复选框的样式,都是在选然后才会有的,所以直接通过css设置就实现不了了。只可以通过js动态设置 html代码使用了jfinal的模板 #(i18nget('所属校区')) #for(campus : campusList)

基于layui实现树形穿梭框

基于layui封装的多选树形穿梭框，双列表互选框

最新发布 layui 穿梭框 左右边的框 实现单选

formon('checkbox(layTransferCheckbox)', function (data) { if (dataothisparent()parent()parent()attr('data-index') == 1 && dataelemchecked) { var leftLength = $(dataothisparent()parent()parent())fin

继续访问

Layuilayui的下拉多选框实现_厦门德仔的博客_layui下拉

此次使用的xm-select插件,一款始于layui,下拉选择框的多选解决方案插件 快速上手使用: 1首先下载xm-selectjs文件,然后放到项目里 下载地址:>

以上就是关于layui的表单验证，怎么通过手动触发全部的内容，包括:layui的表单验证，怎么通过手动触发、c# layui 动态表格进行动态赋值、layui中table表格的基本 *** 作等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/9538674.html

赞 (0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
水泵扬程计算水泵扬程计算一级用户组
00
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表（0条）

    保存