记layui的简单使用_lay-reqtext-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43254676/article/details/93076193

博客介绍了表单的安装引用，建议按官网提示下载最新版本安装包，在当前路径开发，避免单独引用文件导致报错。还详细阐述了表单的使用，包括表单项必填设置、时间选择、赋初值、提交以及使用ajax提交表单等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装引用

根据官网提示直接下载最新版本，请注意，最好不要单独一个个文件引用，因为有可能因为引入路径不对和引入不全导致项目报错，按官网提示下载下来安装包，直接在当前路径进行开发即可。
在这里插入图片描述

表单

我本次使用主要是应用表单，简单写一些

1.表单项
lay-verify=“required” 表示必填项可通过 lay-reqtext 设置提示文字
input 需要有name值，为以后获取input框里的值
在这里插入图片描述

2.时间选择

在这里插入图片描述

3.表单赋初值

通过form.val 给表单的输入项赋初值，通过lay-filter获取到表单
在这里插入图片描述

.

4.表单提交

通过给按钮设置 lay-submit 使按钮的点击事件变成提交通过lay-filter的值可获取到button

监听提交事件
form.on('submit(manualForm))
在这里插入图片描述

5.ajax提交表单

在这里插入图片描述

function handleSubmit() {
				$.ajax({
					type: "POST", // 方法类型
					dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json;charset=UTF-8', // 请求头
					url: "http://192.168.1.50:10086/generateLicense", // 接口地址
					data: str, // 参数
					success: function(resp) { // 处理后台返回结果
						console.log(resp);
						if(resp.data.code === 200) {
                            console.log(resp)
                            console.log('生成协议成功')
						}
					},
					error: function() { // 请求异常
                        console.log('异常')
					}
				});
			}

其中 $(’#form1’).serialize() 将form表单数据序列化直接获取到表单中各inout对应的值，input必须设置name属性值