使用layui提交表单避坑

• 前言
• 准备环境
• Layui介绍
• layui简介

• form表单页面
• form标签
• input标签
• 单选框
• 输入文本框
• 确定按钮

• 导入响应的layui的js和css文件
• 配置layui静态资源
• 编辑表单验证
• 编辑layer弹窗
• 将表单页面与layui进行绑定
• 提交监听获取数据

前言

在此之前需要给大家说一下，这是我的第一个CSDN博客，对于本来就是一个小白的我来说没有什么技术可以和大家一起分享的，但是在ASP.NET平台中开发MVC项目我是踩了不少坑了，所以才想着和大家分享一下我的在表单提交中的踩坑经验,也算是给自己留下更深的印象。如果路过的大神有更好的技术和不妥，希望能与之交流。

准备环境

开发工具是Visual Studio 2017/2019。
数据库为SQL server 2008/2014均可。
前台使用layui框架，浏览器建议使用火狐、Google chrome等高级一点的，不建议使用IE，因为layui框架有些功能不兼容IE。

Layui介绍

layui简介

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

实现过程

form表单页面

在ASP.NET平台上，首先需要编辑好form表单页面

form标签

class：layui-form

<div class=\"layui-form\" lay-filter=\"layuiadmin-form-useradmin\" id=\"layuiadmin-form-useradmin\">

这个很重要
lay-filter=“layuiadmin-form-useradmin”
lay-filter: 为form表单注册的layui监听，以后面的值来为layui框架找到当前所需要提交的表单，并获取该表单中所要提交的所有数据。

input标签

<fieldset class=\"layui-elem-field\"><div class=\"layui-col-md6\"><label class=\"layui-form-label\">请输入</label><div class=\"layui-input-block\"><input type=\"text\" name=\"let_StimulusQuantityCeiling\" id=\"let_StimulusQuantityCeiling\" lay-verify=\"required|number\" placeholder=\"100\" value=\"100\" autocomplete=\"off\" class=\"layui-input\"></div></div></fieldset>

外层fieldset 的class：layui-elem-field；
外层div的class：layui-col-md6；
lable：layui-form-label；
内层div的class：layui-input-inline；
输入框的class：layui-input；
lay-verify=“required|number”
lay-verify:为input框提供输入框验证，layui有默认的验证模式，也可以自定义验证等
name=“let_StimulusQuantityCeiling”
name属性为layui框架获取页面表单数据的重要属性，是必须具备的属性

单选框

<fieldset class=\"layui-elem-field\"><div class=\"layui-row layui-col-space3\"><div class=\"layui-card\"><div class=\"layui-col-md12 layui-col-space3\"><input type=\"radio\" name=\"let_Correction\" value=\"1\" title=\"男\" checked><input type=\"radio\" name=\"let_Correction\" value=\"0\" title=\"女\"></div></div></div></fieldset>

输入文本框

<fieldset class=\"layui-elem-field\"><div class=\"layui-form-item layui-form-text\"><label class=\"layui-form-label\">text</label><div class=\"layui-input-block\"><textarea placeholder=\"请输入......\" class=\"layui-textarea\" name=\"let_TechnicalConditions\" style=\"height:170px\"></textarea></div></div></fieldset>

确定按钮

<div class=\"layui-card-body layui-row layui-col-space10\"><div class=\"layui-col-md12 layui-col-space10\"><div class=\"layui-col-md6\"><button type=\"submit\" class=\"layui-btn\" style=\"width:100%;height:200%;\" lay-submit lay-filter=\"submit_Btn\" id=\"submit_Btn\">确定</button></div></div></div>

将form表单页面作为layer的弹出层显示页面

导入响应的layui的js和css文件

<link href=\"~/Static/layui/style/admin.css\" rel=\"stylesheet\" /><script src=\"~/Static/layui/layui/layui.js\"></script>//路径为自己项目下的layui框架路径

配置layui静态资源

layui.config({base: \'../Static/layui/\' //静态资源所在路径}).extend({index: \'lib/index\' //主入口模块}).use([\'index\',\'layer\'], function () { //独立版的layer无需执行这一句var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句});

编辑表单验证

layui框架自带的验证就不在做过多的介绍，接下来就为大家介绍自定义验证

//自定义验证form.verify({name: 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 \'用户名不能全为数字\';}

其中name值为页面中lay-verify这个属性所对应的值

编辑layer弹窗

var index=layer.open({type: 2//layer弹窗类型, title: \"弹窗标题\" //不显示标题栏false, area: [\'75%\', \'60%\']//弹窗大小, resize: false//是否允许弹窗被拉升，是为true, isOutAnim: true//关闭动画，弹出层弹出时的动画效果, id: \'LAY_layuipro\' //设定一个id，防止重复弹出, content: [\'path\']//弹出层的内容，当type为2时，需要传入一个你需要它显示页面的url,btnAlign:\'c\'//按键排列, btn: \'确定\'//弹出层按键, anim: 1//动画效果,closeBtn: 1//是否开启右上关闭按钮关闭为0,yes:function(){}//点击第一个按钮的回调函数,success:function(){}//弹出层弹出成功后的回调

将表单页面与layui进行绑定

//在第一个按钮的回调中添加绑定var iframeWindow = window[\'layui-layer-iframe\' + index], submitID = \'submit_Btn\', submit = layero.find(\'iframe\').contents().find(\"#\" + submitID);

其中其关键作用的为页面中的lay-verify属性所对应的值

提交监听获取数据

//监听提交iframeWindow.layui.form.on(\'submit(\' + submitID + \')\', function (data) {var field = data.field; //获取提交的字段即为form表单中的所有数据var role = JSON.stringify(field);

获取数据后通过Ajax将获取到的数据提交到后台进行相应的处理（过多的Ajax就不和大家介绍啦，这个网络上有很多很好的文章，我这里就不去做过多的解释）

后台获取数据

后台使用HttpPost/HttpGet方式接收数据都可以

var str = new StreamReader(Request.InputStream);var stream = str.ReadToEnd();

此时前端页面的数据已经在stream中存储着了，不过现在是以string类型存储，还不能直接与数据库进行对接，所以就要将stream转化为json格式的数据，然后使用一个字段与前端中字段一致的对象来接收，最后在进行一系列的数据库的操作即可

JavaScriptSerializer js = new JavaScriptSerializer();LangleyExperimentTable let = js.Deserialize<LangleyExperimentTable>(stream);dbDrive.Insert(let);

好了，这样就完成了一个ASP.net平台下开发MVC项目中使用layui实现弹框表单验证、数据异步提交和接收的一个整体的从前端到后台的总体的操作和数据流程，以上均为自己在做项目时的经验，如有错误，请指正