layui 表单验证案例

文本框，手机，邮箱，textarea等格式的验证

下面是需要引入的插件

<script src="layui/layui.js"></script><script src="layui/lay/dest/layui.all.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">

HTML代码：

<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">反馈主题</label><div class="layui-input-block"><input name="title" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off" lay-verify="title"></div></div><div class="layui-form-item"><label class="layui-form-label">姓名</label><div class="layui-input-block"><input name="fname" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" lay-verify="fname"></div></div><div class="layui-form-item"><label class="layui-form-label">手机</label><div class="layui-input-block"><input name="phone" class="layui-input" type="tel" autocomplete="off" placeholder="请输入手机" lay-verify="phone"></div></div><div class="layui-form-item"><label class="layui-form-label">邮箱</label><div class="layui-input-block"><input name="email" class="layui-input" type="text" autocomplete="off" placeholder="请输入邮箱" lay-verify="email"></div></div><div class="layui-form-item"><label class="layui-form-label">单选框</label><div class="layui-input-block"><input name="sex" title="男" type="radio" checked="" value="男"><input name="sex" title="女" type="radio" value="女"><input name="sex" title="保密" type="radio" value="密"></div></div><!--<div class="layui-form-item layui-form-text"><label class="layui-form-label">普通文本域</label><div class="layui-input-block"><textarea class="layui-textarea" placeholder="请输入内容">请输入内容</textarea></div></div>--><div class="layui-form-item layui-form-text"><label class="layui-form-label">内容</label><div class="layui-input-block"><textarea class="layui-textarea layui-hide"  name="contact" id="LAY_demo_editor" lay-verify="contact"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-filter="demo2" lay-submit="">跳转式提交</button><button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button><button class="layui-btn layui-btn-primary" type="reset">重置</button></div></div></form>

js验证代码

<script>
layui.use(['form', 'layedit', 'laydate'], function(){var form = layui.form(),layer = layui.layer,layedit = layui.layedit,laydate = layui.laydate;//自定义验证规则form.verify({title: function(value){if(value.length < 5){return '标题至少得5个字符啊';}}, fname: function(value){if(value.length < 4){return '请输入至少4位的用户名';}}, contact: function(value){if(value.length < 4){return '内容请输入至少4个字符';}},phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！'],email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']});//创建一个编辑器layedit.build('LAY_demo_editor');//监听提交form.on('submit(demo1)', function(data){layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'})return false;});
});
</script>

本文经转载: 这里

layui 表单验证案例相关推荐

layui表单验证内置自定义规则 - 使用说明
关于 layui表单的验证规则.调用.自定义规则的使用经验总结: 除了 layui 本身配套的一个验证体系,还支持开发者自定义验证规则(如上表中的[自定义密码验证(代码参考下文)]),并直接嵌入到页面 ...
AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)
这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...
layui表单验证方式大全
表单自带校验 lay‐verify:是表单验证的关键字 required (必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity ...
【前端】JS的BOM和DOM，事件，表单验证案例
先看小练习1:开关灯用到的Dom相关知识点 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element* document.getElementById("id值&qu ...
Layui表单验证失效解决办法
出现layui表单提交时没有进行验证的情况解决办法 <div class="layui-input-inline" style="width: 150px;&quo ...
layui表单验证demo
表单验证方法很多,使用layui插件自带的验证写法也是很简单.首先到官网http://www.layui.com/下载layui插件,然后按照官方提供的API编写前台页面就可以了,下面提供一个layu ...
【解决】LayUI表单验证，提交按钮在弹出层，lay-verify失效的情况
layui的表单是我特别常用的一个功能,这次在写添加和修改界面时,也顺手将layui的表单界面放进去,想着等会利用layui自带的表单验证功能将用户输入的值进行一一验证,没想到遇到了如题目所描述的情况 ...
html表单验证案例,HTML5表单验证（4个实用的表单美化案例）
multipart/form-data 在使用包含文件上传控件的表单时,必须使用 autocomplete="on" 自动补全功能 novalidate 不验证 placehold ...
00008 - layui 表单验证，需要验证，但非必输
当使用layui的验证规则,比如手机, <input type="text" name="userName" lay-verify="phon ...
layUI表单验证不生效的问题
layui中使用lay-verify进行表单项的校验,但是点击提交按钮无效,校验要满足两个条件 form标签需要添加 class="layui-form" 提交按钮需要添加 lay ...

layui 表单验证案例

layui 表单验证案例相关推荐

最新文章

热门文章