精华内容
下载资源
问答
  • Layui校验规则

    千次阅读 2019-07-04 18:30:14
    Layui校验规则 1. 弹框中的规则验证书写: 如果想要使用弹窗层自带的确认取消按钮,去提交form表单内容,需如下步骤: 在每一个form表单中标签之前, 添加一个隐藏的按钮 <button class="authorityAddOrUpdateBtn...

    Layui校验规则

    1. 弹框中的规则验证书写:

    如果想要使用弹窗层自带的确认取消按钮,去提交form表单内容,需利用layui form表单属性lay-submit,进行如下步骤:
    
    1. 在每一个form表单中标签之前, 添加一个隐藏的按钮,type="button"这个type属性必须书写,否则会默认按照layui form表单进行submit提交,
    	<button type="button" class="authorityAddOrUpdateBtn" lay-submit style="display: none;"></button>
    

    class 属性值全局唯一, 包含 lay-submit display:none

    1. 在弹框页面
    layer.open({
    	yes: function (index, div) {
        	var form = layui.form;
       		var submited = $(".authorityAddOrUpdateBtn");   // 找到刚才的按钮
        	submited.click();   // 触发隐藏按钮的点击事件
        	var form = layui.form;
            form.on("submit(addOrUpdate)",function(data) {
                // addOrUpdate();  // 验证通过,进行你想要做的什么事情,方法的书写
            })
    	}
    }
    
    1. 自定义验证可以在全局js文件里写
    // 表单验证
    layui.use('form', function () {
    	var form = layui.form;
      	form.render();
      	// 开始表单自定义验证
      	form.verify({
        	// 必填项
        	title: function(value){ //value:表单的值、item:表单的DOM对象
        		if(value == ""){
            		return '必填项不能为空哈哈!';
            	}
        	}
     	});
    });
    

    弹出层校验时注意:

    有时候会发生:当第一次进入弹窗时,填写完必填项,点击提交,会没有效果,再次点击,才提交数据,解决方案:
    
    // 1.给自定义button 添加属性 disabled 
    <button type="button" disabled class="noticeAddOrUpdateBtna" lay-submit lay-filter="sysNoticeAddOrUpdate" style="display: none;">124</button>
    // 2. 当弹出层加载时,默认点击一下弹出层自带的确定按钮,然后去掉button的disabled属性,就可以了。
    $(document).ready(function () {
    	$(".layui-layer-btn0").click();
    	$(".noticeAddOrUpdateBtna").removeAttr("disabled");
    });
    

    2. 自定义按钮校验规则添写
    有时候我们在验证表单时,会发现,验证的同时还会继续往下走方法或者发请求,这时候就得注意form.on(“submit(filter)”,function(){})的使用了。

    需要在自己写的button中,添加属性: lay-submit="" ,属性: lay-filter="save",然后在button事件中form.on,监听这个提交事件。
    
    // 第一步  在input框中添加属性 lay-verify="required"
    <input type="text" lay-verify="required" >
    
    // 第二步  在自己的button中添加事件和两个属性 
    <button type="button" lay-submit="" lay-filter="save" onclick="reportSave">保存</button>
    
    // 第三步  处理button事件,同时监听规则验证,验证成功之后做其他处理
    function reportSave() {
        var form = layui.form;
        form.on("submit(save)",function(data) {
           // 在这里写需要做的事情
        })
    }
    
    展开全文
  • //监听提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); //ajax提交放在这里 return false; }); 一定要把提交的代码放到监听的代码里面,问题解决! 另外, ...
      //监听提交
      form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));
        //ajax提交放在这里
        return false;
      });

    一定要把提交的代码放到监听的代码里面,问题解决!

    另外,

    					    element.on('submit(subveri)', function(data){
                                // ajax提交放在这里
    					      return false;
    					    });
    

     

    展开全文
  • 提交表单通过ajax验证,点击提交按钮后对填写数据进行校验,验证数据库中是否存在该用户的学号,存在则不能提交表单,不存在擦能提交表单。 HTML代码 <div class="layui-form-item"> <label class=...

     

    提交表单通过ajax验证,点击提交按钮后对填写数据进行校验,验证数据库中是否存在该用户的学号,存在则不能提交表单,不存在则不能提交表单。

    HTML代码 

    <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>学号
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="idCard" name="IdCard" lay-verify="required|number|IdCard" autocomplete="off" class="layui-input" placeholder="请输入学号">
                    </div>
                </div>

    JS 验证部分代码

     form.verify({
                        //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
                       /* IdCard: [
                            /^[\S]{10}$/
                            , '请输入正确的校园卡号!'
                       ]*/
                        IdCard: function (value) {
                            value = $('#idCard').val();
                            if (value.length != 10) {
                                return '请输入正确的校园卡号!';
                            }
                            if (!verifyStudentIsExist()) {
                                return '信息已存在,是否进行修改!';
                            }
                          
                        }
                    });
     function verifyStudentIsExist() {
                        var studentid = $('#idCard').val();
                        var resCode;
                        $.ajax({
                            url: "/Students/IsExistStudentByIdCard",
                            type: 'POST',
                            dataType: 'text',
                            async: false,//必须是同步提交的
                            data:studentid ,
                            success: function (t) {
                                if (t.result == 0) {
                                    console.log(t.result);
                                    resCode = 0;//数据库中没有该用户数据!
                                }
                                else if (t.result!=0) {
                                    console.log(t.result);
                                    resCode=1;//数据库中有该用户数据!
                                }
                            },
                            error: function () {
                                alert("出错了!");
                            }
                        });
                        if (resCode == 0) {
                            return true;
                        }
                        return false;
                    }

     

    展开全文
  • layui一个不错的前端框架,上手较快不过,不过...写了一个form但是要校验用户名的唯一性,所以使用了layui的自定义校验,代码如下 form.verify({ username:function(value){ var code; $.ajax({ type:"get", ...

    layui一个不错的前端框架,上手较快不过,不过官网文档有些还是不全面,废话不多说,直接入题。

    写了一个form但是要校验用户名的唯一性,所以使用了layui的自定义校验,代码如下

    form.verify({
        username:function(value){
            var code;
            $.ajax({
                type:"get",
                async:false, //必须同步提交
                url: baseURL+'sys/user/username/'+value,
                success:function(res){
                    code = res.code;
                }
            })
            if(code==500){
                return '用户名已存在!';  //返回值必须在这里返回 只能返回 字符串,不能返回true or false
            }
        }
    })

    input加上需要校验的地方,required是必填,username 必须是你上面 定义的验证方法。

    <input type="text" name="username" lay-verify="required|username" autocomplete="off" placeholder="请输入用户名" class="layui-input">

    接下来就是form 表单的提交方法

    form.on('submit(userAddOrUpdate)', function(data){
        var url = data.field.userId == "" ? "sys/user/save" : "sys/user/update";
    		
        $.ajax({
            type: "post",
            url: baseURL + url,
            contentType: "application/json",
            data: JSON.stringify(data.field),
            success:function(res){
                if(res.code === 0){
                    layer.msg(res.msg);
                }else{
                    layer.msg(res.msg);
                }
            }
        })
        //return false; //这行代码是用来控制跳页面的 跳转提交
    });

    下面看下效果,完美,哈哈

    展开全文
  • layui表单提交到后台

    万次阅读 2018-10-17 22:57:57
    思路:我在开发问卷调查模块时,想添加问卷的时候使用layui弹出一个表单,然后经过校验提交到ssm下的Controller里 一:jsp要弹出的表单 &lt;button id="add" class="layui-btn layui-btn-sm"...
  • layui关于form表单submit提交时的校验

    千次阅读 2020-07-04 12:59:51
    一、首先先看layui关于form表单的封装 二、x-admin的登录源码 三、因为x-admin的登录使用了required是必填项,只判断不为空。需要在登录时校验输入的账号密码不能小于六位数需要自己自定义添加判断。 目前...
  • layui中使用lay-verify进行多条件校验

    千次阅读 2020-07-09 22:37:38
    最近在工作中,用到了layui校验。 一、layui校验很简单,主要是4步: 1.在form表单内加上class=“layui-form” 2.在提交按钮上加上lay-submit 3.在想要校验的标签,加上lay-verify=””,在这个属性里,加上想要...
  • 页面点击提交后,日历插件因为验证问题,导致input失去焦点所以点击不起作用 需要在js里面增加这两个属性即可,亲测好用 ... layui.use(['laydate'],function(){ var laydate = layui.laydate;//将日...
  • 一、layui校验很简单,主要有以下步骤: ​1. 在form表单内加上class="layui-form" 2. 在提交按钮上加上lay-submit 3. 在想要校验的标签,加上lay-verify=””,在这个属性里,加上想要的值,就可以进行校验了...
  • 在使用layui v2.5.6 的表单组件时,原生表单组件的校验事件,需要绑定到按钮,在提交时自动触发。 在只需要做校验操作的情况,由于没有提供表单校验方法,处理比较复杂,这里对源码进行了修改,抽离了表单校验逻辑,...
  • layui: 使用总结

    2021-03-30 04:21:40
    layui提交表单会自动刷新页面: https://www.layui.com/doc/element/form.html https://blog.csdn.net/weixin_39530509/article/details/111928674 提交按钮回调函数中的代码有问题 layui表单提交,校验没有提示:...
  • 1.select动态赋值 //将真正的value赋值给select。name为select标签后跟的name,value为想赋给select的值。 $(“select[name=example]”).val(“value”);...layui-form-item&amp;quot;&amp;amp
  • 在form表单内加上class=“layui-form” 在提交按钮上加上lay-submit lay-filter=“Submission” type=“button” 在想要校验的标签,加上lay-verify=””,在这个属性里,加上想要的值,就可以进行校验了。 lay-...
  • 本来想使用layui自己写自定义校验,结果如上图报错 一直以为自己引用文件出错,结果发现是在正则表达式的写法上出现错误 最后发现是正则表达式前加了个‘!’号!!! 之前本来是想判断不是“…”,结果后面想了下,...
  • layui的弹窗里有个表单。然后有个提交检验必填项,一个取消按钮。点击取消就执行关闭弹窗layer.closeAll();但是关闭弹窗的时候会闪现一下校验:请输入此字段。 我明明没有在这个按钮上加lay-submit="" lay-filter=...
  • 首先先说一下input的各个属性:class="layui-input"-------将input定义为layui样式,name="finishdate"-------规定了input的名称,只有设置了 name 属性的表单元素才能在提交表单时传递它们的值,lay-verify=...
  • layui自用应用总结

    2020-07-06 15:44:34
    表单事件绑定1.1 表单绑定swith(checkbox)事件1.2 表单绑定select事件1.3 表单绑定radio事件1.4 表单绑定提交事件2.利用layui的模板技术渲染3.表格使用与行内与表头事件绑定4.表单校验 0.前提条件主题结构 其实...
  • layui中使用lay-verify进行表单项的校验,但是点击提交按钮无效,校验要满足两个条件 form标签需要添加 class="layui-form" 提交按钮需要添加 lay-submit="" 注意:这个提交按钮要写在from里面。 <button class=...
  • layui学习笔记一

    2018-08-11 12:38:04
    1.form表单自定校验的时候,能够直接return字符串提示消息 form.verify({ username:function(value){ if(value.length&lt;5){ return '用户名至少得5个字符啊'; } } }); 2.提交...
  • 2.在提交按钮上加上lay-submit="" 3.在想要校验的标签,加上lay-verify=“required|username” 在这个属性里,加上想要的值 4.本页面至少要存在以下JS代码: <script> layui.use(['form', 'layedit', 'laydate...
  • 基于layui的ssm表单登陆验证案例

    千次阅读 2019-03-22 10:07:30
    引言:简单的表单验证注册案例,其中包括了表单校验,使用layui的ui组件,以及采用ajax跟后台进行数据交换并提交表单。 代码实现: <%@ page language="java" contentType="text/html; charset=utf-8" ...
  • layui中form表单提交失败,阻止刷新form,避免清空用户刚填写的数据 用户提交时经校验,数据库已经有完全相同的数据,因此添加失败,但是不关闭弹窗,也不刷新form,不清空用户刚填写的数据 //表单提交事件 form.on...
  • 首先定义公共的js:common.js //添加或修改页面 function showForm(){ var len= arguments.length; if(len==1){ layer.open({ type: 2, ... skin: 'layui-layer-rim', //加上边框 ...
  • 当使用layui的验证规则,比如 手机, <input type="text" name=...可自定义验证规则, 即为空时,不校验, 不为空时, 要校验。 自定义的规则如下: admin.v_email = function(value, item){ var exp = /^(
  • easyUI校验总结

    2019-12-03 21:25:28
    在easyUI框架进行前端页面渲染时,from表单的提交进行校验! //使用easyUI框架,必须将easyUI相关的js导入项目中去 //此处中class="easyui-form" ,表示该表单是easyUI表单 //method="post" ,表示提交方...
  • 编辑器记得安装lombok插件 ...欢迎提交PR一起完善项目,以下为提PR并合并的小伙伴(排名不分先后): 反馈交流 加入QQ群和大家一起交流吹水: 特别赞助
  • /* 验证码校验 */ public function check_verify($code, $id = '') { $verify = new \Think\Verify(); $res = $verify->check($code, $id); $this->ajaxReturn($res, 'json'); } public function ...
  • 提交gitignore,解决StringUtils.lowerCaseFirst潜在的NPE异常,校验修改为@RequestParam参数校验,lombok之@data和@Slf4j优化,fix JdbcDAO模板类名显示为中文问题,WebMvcConfig整合MessageConverter,模板代码分类(感谢...

空空如也

空空如也

1 2
收藏数 30
精华内容 12
关键字:

layui提交校验