精华内容
下载资源
问答
  • layUI 提交表单通过ajax进行数据验证,验证不通过则不能提交表单
    千次阅读
    2020-05-26 20:18:14

     

    提交表单通过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自定义校验规则

    2021-10-27 01:47:57
    在使用layUI这款开源模块化前端 UI 框架是,如何自定义表单验证规则? 有两种写法,第一种是函数式方式,第二种是数组的形式;其大致代码已写在官网上,这里不再赘述,需要请查看: form.verify({ username: ...

    在使用layUI这款开源模块化前端 UI 框架是,如何自定义表单验证规则?
    有两种写法,第一种是函数式方式,第二种是数组的形式;其大致代码已写在官网上,这里不再赘述,需要请查看 :

    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 '用户名不能全为数字';
        }
        
        //如果不想自动弹出默认提示框,可以直接返回 true,这时你可以通过其他任意方式提示(v2.5.7 新增)
        if(value === 'xxx'){
          alert('用户名不能为敏感词');
          return true;
        }
      }
      
      //我们既支持上述函数式的方式,也支持下述数组的形式
      //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
      ,pass: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位,且不能出现空格'
      ] 
    });      

                                   图 1.官方文档        

    本文主要记录在使用过程中出现的细节问题。

    函数式写法,也就是你看到的这一段:

    form.varify({
        pass: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位,且不能出现空格'
      ] 
    })
    这一写法需要注意三点,特别注意:这三点必须同时做到才能正确设置自定义表单验证:

    1.引用这段代码之前,需要先从layUI中获取form对象,再赋值给form

        var form = layui.form
        form.verify({
        pass: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位,且不能出现空格'
      ] 
    })

    图2.js中的写法

    2.这段代码是需要写在js文件中的

    3.layUI的引用顺序
    在html文件中,layUI的引用应该放在最前的

    <body>
        <!-- 导入layUI -->
        <script src="/assets/lib/layui/layui.all.js"></script>
        <!-- 导入jQuery -->
        <script src="/assets/lib/jquery.js"></script>
        <!-- 导入自己的js脚本 -->
        <script src="/assets/js/login.js"></script>
    </body>

    图3.html文件中的引入

    最后,当你自定义了类似上面的验证规则后,你只需要把 key(图二中的pass,若有多个key值,以“|”进行分隔) 赋值给输入框的 lay-verify 属性即可:

    1. <input type="text" lay-verify="required|username" placeholder="请输入用户名">
    2. <input type="password" lay-verify="required|pass" placeholder="请输入密码">

    引用:常见的密码正则表达式 :常见密码正则表达式 - 酷极和 - 博客园

    官方文档:表单模块文档 - Layui

    展开全文
  • layui关于form表单submit提交时的校验

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

    一、首先先看layui关于form表单的封装

    二、x-admin的登录源码

    三、因为x-admin的登录使用了required是必填项,只判断不为空。需要在登录时校验输入的账号密码不能小于六位数需要自己自定义添加判断。

    目前只会使用正则去验证,如果是用length去验证不知道可不可行。

    展开全文
  • 今天小编就为大家分享一篇layui插件表单验证提交触发提交的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layui表单验证及提交

    千次阅读 2020-10-13 21:02:06
    导入layui相关包后,关键代码是“ 保存”按钮中的 lay-filter=“saveArticle” lay-submit <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:mo="https://gitee.com/aun/Timo"> ...

    查了很多人写的,真是试了各种方法,最后在这个帖子里看到的方法起了作用。
    看代码:

    1. html页面
      导入layui相关包后,关键代码是“ 保存”按钮中的 lay-filter=“saveArticle” lay-submit (注,这一行的双引号不对,需要改成英文的)
    	<!DOCTYPE html>
    	<html xmlns:th="http://www.thymeleaf.org"
    	      xmlns:mo="https://gitee.com/aun/Timo">
    	<head>
    	    <link rel="stylesheet" href="/css/plugins/font-awesome-4.7.0/css/font-awesome.min.css"  media="all">
       	    <link rel="stylesheet" href="/lib/layui-v2.3.0/css/layui.css"  media="all">
    	</head>
    	<body>
    	<div class="layui-form timo-compile">
    	    <form th:action="@{/company/testApplication/save}" class="layui-form">			
    	        <table style="border:1px;">	        	
    	        	<tr>
    	        		<td>
    	        			<label class="layui-form-label-company required">姓名</label>
    	        		</td>
    	        		<td>
    						<input class="layui-input" type="text" name="title"  placeholder="请输入姓名" th:value="${personInformation?.title}">
    	        		</td>
    	        		<td>
    						<label class="layui-form-label-company required">证件号码</label>
    	        		</td>
    	        		<td>
    						<input lay-verify="required|identity" class="layui-input" type="text" id="idNumber" name="idNumber"  placeholder="请输入证件号码" th:value="${personInformation?.idNumber}">
    	        		</td>
    	        	</tr>			
    				<tr>
    					<td>
    						<label class="layui-form-label-company required">培训情况</label>
    					</td>
    					<td  colspan="3">
    						<div class="layui-input-block" style="margin-left: 0px;">
    			                <textarea placeholder="请输入内容" class="layui-textarea" name="training"  id="training" th:utext="${personInformation?.training}"></textarea>
    			            </div>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<label class="layui-form-label-company required">管理经历</label>
    					</td>
    					<td  colspan="3">
    						<div class="layui-input-block" style="margin-left: 0px;">
    			                <textarea placeholder="请输入内容" class="layui-textarea" id="management" name="management">[[${personInformation?.management}]]</textarea>
    			            </div>
    					</td>
    				</tr>
    					        
    	        </table>
    			<div class="layui-form-item timo-finally">
    	            <button class="layui-btn ajax-submit"  lay-filter="saveArticle" lay-submit><i class="fa fa-check-circle"></i> 保存</button>
    	            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
    	        </div>
    	    </form>
    	</div>
    	<script src="/lib/layui/layui.js" charset="utf-8"></script>
        <script src="/js/main.js" charset="utf-8"></script>
        <script src="/js/util.js" charset="utf-8"></script>
        <script type="text/javascript" src="/js/plugins/jquery-2.2.4.min.js"></script>    
    	<script>
    	layui.use('laydate', function(){
    	  var laydate = layui.laydate;
    	  	  //常规用法
    	  laydate.render({
    	    elem: '#birth'  
    	    ,type: 'date'
    	    ,format: 'yyyy-MM-dd'
    		,trigger: 'click'
    	  });	
    	});
    	
    	$(document).ready(function(){
    		 var reg = new RegExp("ABABAB","g");//g,表示全部替换。
    		 $("#training").val($("#training").val().replace(reg, "\n"));
    		 $("#management").val($("#management").val().replace(reg, "\n"));
    		 if($("#remark").val()){
    			 $("#remark").val($("#remark").val().replace(reg, "\n"));
    		 }
    		});
    	</script>
    	</body>
    	</html>
    
    1. 提交的js
      关键代码是form.on(‘submit(saveArticle)’, function(data){});
    layui.use(['element', 'form', 'layer', 'upload'], function () {
        var $ = layui.jquery;
        var element = layui.element; //加载element模块
        var layer = layui.layer; //加载layer模块
        var upload = layui.upload;  //加载upload模块
        var form = layui.form;
    
    form.on('submit(saveArticle)', function(data) {       
            var form1 = $(this).parents("form");
            var url = form1.attr("action");
            var serializeArray = form1.serializeArray();
            //console.log("data: " + serializeArray);
            for(ele in serializeArray){
            	if(serializeArray[ele].value.indexOf("\n")!=-1	){
            		var str = serializeArray[ele].value.replace(RegExp("\n", "g"), "ABABAB");
            		serializeArray[ele].value = str;
            	}
            }
            $.post(url, serializeArray, function (result) {
                if (result.data == null) {
                    result.data = 'submit[refresh]';
                }
                $.fn.Messager(result);
            });
            return false;  //这句要加上,否则可能会报错
        });
    
    1. 题外,有部分代码完成的是textarea保存前\n转码与回显时换行,在另一篇博客里有记述。

    做完以上工作,我的验证就成功了。

    1. 密码验证
    form.verify({
    		pass: function(value, item){ //value:表单的值、item:表单的DOM对象
    		    if(new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
    		      return '密码要有特殊字符';
    		    }
    		    if(!/^[\S]{8,12}$/.test(value)){
    		      return '密码必须8到12位,且不能出现空格';
    		    }
    		    if(/^\d+\d+\d$/.test(value)){
    		      return '密码不能全为数字';
    		    }
    		  }
    		
    		  //我们既支持上述函数式的方式,也支持下述数组的形式
    		  //数组的两个值分别代表:[正则匹配、匹配不符时的提示文字]
    		  //,pass: [/^[\S]{6,12}$/,'密码必须8到12位,且不能出现空格'] 
    		  
    		});
    
    展开全文
  • layui校验不成功依然提交的问题

    千次阅读 2019-12-16 13:09:25
    //监听提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); //ajax提交放在这里 return false; }); 一定要把提交的代码放到监听的代码里面,问题解决! 另外, ...
  • layui自定义表单校验

    千次阅读 2020-10-10 15:04:00
    layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。 1 2 3 4 5 6 7 8 required(必填项) phone(手机号) email(邮箱) url(网址) ...
  • 2021-06-22 15:10:51 form表单 表单1 立即提交 表单2 立即提交 表单3 立即提交 提交 ```
  • Layui校验规则

    千次阅读 2019-07-04 18:30:14
    Layui校验规则 1. 弹框中的规则验证书写: 如果想要使用弹窗层自带的确认取消按钮,去提交form表单内容,需如下步骤: 在每一个form表单中标签之前, 添加一个隐藏的按钮 <button class="authorityAddOrUpdateBtn...
  • 今天要在提交表单前确认勾选协议, 加上 lay-verify="required"没有用 ,改成下面这样 <input type="checkbox" lay-verify="check" name="agree" id="agree" title="确定" > 在js中加上下面的校验代码就OK了...
  • layui一个不错的前端框架,上手较快不过,不过...写了一个form但是要校验用户名的唯一性,所以使用了layui的自定义校验,代码如下 form.verify({ username:function(value){ var code; $.ajax({ type:"get", ...
  • layui的form表单字段校验

    千次阅读 2020-03-29 23:18:37
    layui的form表单字段校验 代码示例 <form class="layui-form"> <input type="hidden" name="cateId" th:value="${category != null ? category.cateId : 0}"> <div class="layui-form-item"...
  • layui中单选框校验方法和注意事项

    千次阅读 2020-08-03 10:05:21
    layui中单选框radio:校验方法和注意事项1. html部分2. js部分3. 重要提示 1. html部分 <div class="layui-form-item"> <label class="layui-form-label">性别:</label> <div class="layui-...
  • layui表单提交前数据检验

    千次阅读 2019-02-12 15:23:20
    layui自带了一些简单的数据检验,lay-verify,如: &lt;form&gt; &lt;input type="text" name="operatMoney" class="layui-input" lay-verify="required|number&...
  • 在使用layui v2.5.6 的表单组件时,原生表单组件的校验事件,需要绑定到按钮,在提交时自动触发。 在只需要做校验操作的情况,由于没有提供表单校验方法,处理比较复杂,这里对源码进行了修改,抽离了表单校验逻辑,...
  • 使layui.js form 可主动验证表单是否通过。扩展layui下的form.js 。文章链接 https://blog.csdn.net/qq_17837497/article/details/107505486
  • layui表单提交后刷新页面问题

    千次阅读 2020-05-15 15:44:04
    鄙人在测试页面表单提交的时候发现有时候点击提交按钮,第一次提交会验证必填项,但是再次点击页面会刷新,但是内容并没有提交后台,导致页面没有内容,白填写,最后经过鄙人一步步的测试发现是一个自己写的js中表单...
  • layui框架里边针对于表单元素做了比较多的功能,下面将介绍的功能就是form模块里面自00带的表单验证功能,该功能可以在提交表单时自动验证表单。 首先要使用form模块时需要加载模块,这是所有模块都需要干的事情...
  • layui中像输入长度、大小写这样的自定义校验,官方文档中应该很容易看懂的。 这里说两个常用的:注册时的确认密码校验;注册时用户已存在校验。 实施 1、确认密码 html: <div class="layui-form-item">...
  • 、在触发校验提交按钮上加上lay-submit,(这些按钮也需要再from表单中) 3.、在想要校验的标签,加上lay-verify=””,在这个属性里,加上想要的值,就可以进行校验了。 有以下值供选择: required(必填项) ...
  • layui表单验证

    2021-09-14 14:08:16
    layui表单元素的校验只需在...
  • layui-form表单验证提交

    2020-09-02 21:50:23
    button class="layui-btn" lay-submit lay-filter="demo1">立即提交</button> //监听提交form.on('submit(demo1)', function(data){ alert(111)return false;}); Button、按钮加lay-submit属性,验证方法...
  • 前端使用了layui框架,我现在需要在前端提交一个表单到后端保存,正常保存没有问题,现在我添加进来了layedit,使用layedit渲染了textarea,我现在想使用了form监听submit功能,然后手动发起ajax请求完成前后端分离...
  • 官方文档详见:https://www.layui.com/doc/modules/form.html#verify 虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底...提交</button>
  • layui表单提交没成功也会重新刷新表单,layui bug 在form.on最后添加return false;就可以了,如下图
  • Layui表单验证

    2021-05-16 11:02:51
    要想使用layui插件中form表单验证,我们首先需要加载初始化layui模块,因为这里用到form表单,所以要加载form模块。 var layer, layuiTable, form;//保存layui模块以便全局使用 $(function(){ //加载&&初始...
  • 使用 layui-verify 验证 表单选项 , 如果不满足则停留在此页面 , 不进行表单提交 。 如果表单验证通过 ,通过ajax对表单进行相应操作。 二、效果图 三、如何使用 ? 示例 : 表单 <form class="layui-form" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 916
精华内容 366
关键字:

layui提交校验