Layui表单验证及提交

最新推荐文章于 2024-03-27 12:34:06 发布

foxbamboo

最新推荐文章于 2024-03-27 12:34:06 发布

阅读量3k

点赞数

分类专栏：前端 Layui 验证文章标签： html5 前端

本文链接：https://blog.csdn.net/foxbamboo/article/details/109060507

版权

前端同时被 3 个专栏收录

15 篇文章 1 订阅

订阅专栏

Layui

5 篇文章 0 订阅

订阅专栏

验证

1 篇文章 0 订阅

订阅专栏

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

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>

提交的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;  //这句要加上，否则可能会报错
    });

题外，有部分代码完成的是textarea保存前\n转码与回显时换行，在另一篇博客里有记述。

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

密码验证

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位，且不能出现空格'] 
		  
		});

foxbamboo

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Layui表单验证及提交

查了很多人写的，真是试了各种方法，最后在这个帖子里看到的方法起了作用。看代码：html页面导入layui相关包后，关键代码是“ 保存”按钮中的 lay-filter=“saveArticle” lay-submit <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:mo="https://gitee.com/aun/Timo"> <head> <li
复制链接

扫一扫