layui---表单验证
使用layui,使用它的表单验证也是比不可少的,下面就来总结下:
<!-- 不用form 用div也可以 -->
<form class="layui-form" lay-filter="form-box">
<div class="layui-form-item">
<label class="layui-form-label">必填</label>
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="required" value="123" placeholder="请输入" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux layui-inline">必填项做验证</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" value="a@qq.com" placeholder="请输入" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux layui-inline">必填项做验证</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机</label>
<div class="layui-input-inline">
<input type="text" name="phone" lay-verify="phone" value="18314416390" placeholder="请输入" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux layui-inline">必填项做验证</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数字</label>
<div class="layui-input-inline">
<input type="text" name="number" lay-verify="number" lay-verType="tips" value="3" placeholder="请输入" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux layui-inline">吸附验证</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分数</label>
<div class="layui-input-inline">
<input type="text" name="score" lay-verify="score" lay-verType="tips" value="60" placeholder="请输入" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux layui-inline">自定义验证规则</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">长度</label>
<div class="layui-input-inline">
<input type="text" name="length" lay-verify="length" lay-verType="tips" value="1234567" placeholder="请输入" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux layui-inline">自定义验证规则</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-filter="form-submit" lay-submit>提交</button>
</div>
</div>
</form>
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript">
/**
* 1、要想使用layui的表单验证,需要在提交按钮上设置 lay-submit 属性,才会触发layui的验证规则。
* 2、form.on('submit(form-submit)') 这里监听表单提交获取数据 这个 lay-filter="form-submit" 是放置到提交 class="layui-btn" 按钮上,而不是form上。
* 3、form.value('form-box',{}); 这里的设置默认表单数据 这个 lay-filter="form-box" 是放置到 class="layui-form" 上的
*/
var verify = {
score:function(value,item){
if(value < 60){
return '分数必须大于60';
};
},
length:[/^[\S]{6,12}$/,'长度必须是6到12位']
};
layui.use('form', function(){
var form = layui.form;
form.verify(verify);
form.on('submit(form-submit)',function(data){
console.log('我提交了');
console.log(data.field); // 表单数据 {name:value}
// console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
// console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
// console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
// 用于提交成功初始化表单
form.val("form-box",{
'username':'',
});
});
});
</script>
layui---表单验证的更多相关文章
- layui表单验证
layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值. required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) da ...
- layui 表单验证汇总
1 表单自带校验 lay-verify:是表单验证的关键字有以下值供选择: required 必填项phone 手机号email 邮箱date 日期url 链接identity 身份证number 数 ...
- 00008 - layui 表单验证,需要验证,但非必输
当使用layui的验证规则,比如 手机, <input type="text" name="userName" lay-verify="phon ...
- layui 自定义表单验证的几个实例
*注:使用本方法请先引入layui依赖的layu.js和layui.css 1.html <input type="text" name="costbudget&q ...
- 使用 layUI做一些简单的表单验证
使用 layUI做一些简单的表单验证 <form method="post" class="layui-form" > <input name ...
- layui之表单验证
这篇文章的表单验证我只是随便记录下,望各位看官理解 1.排序 验证 html代码 <div class="layui-form-item"> <label cla ...
- .net core使用Ku.Core.Extensions.Layui实现layui表单渲染
演示网站地址:http://layui.kulend.com/项目地址:https://github.com/kulend/Ku.Core.Extensions/tree/master/Ku.Core ...
- 使用layer弹窗和layui表单做新增功能
注释:代码参考http://blog.51cto.com/825272560/1891158,在其修改之上而来,在此感谢! 1.需求:使用layer在弹窗内完成新增,成功后提示并刷新页面(父页面,li ...
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- 玩转spring boot——AOP与表单验证
AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...
随机推荐
- C#_02.13_基础四_.NET方法
C#_02.13_基础四_.NET方法 一.方法概述: 方法是一块具有名称的代码.可以通过方法进行调用而在别的地方执行,也可以把数据传入方法并接受数据输出. 二.方法的结构: 方法头 AND 方法 ...
- shell之磁盘容量检查,配合crontab可以定时清理磁盘
我的做法: !/bin/bashAvailable=`df -k | sed -n 2p | awk '{print $4}'`if [ $Available -eq 0 ];then ...
- Windows下NetBeans中文乱码解决办法
找到你的Netbeans安装目录下的etc文件夹,用记事本打开netbeans.conf,找到netbeans_default_options(不是最后那个带句号的…), 在其属性的最后(冒号以内)加 ...
- 转: linux centos7 下安装maven
转: https://www.tecmint.com/install-apache-maven-on-centos-7/
- idea插件actiBPM源码
actiBPM https://github.com/Activiti/Activiti
- Could not parse multipart servlet request; nested exception is org.apache.commons.fileupload.FileUploadBase$IOFileUploadException: Processing of multipart/form-data request failed.
org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; nes ...
- mysql数据库全备和全备还原(使用Xtrabackup)
一.使用innobackupex创建全备 语法 innobackupex --user=DBUSER --password=DBUSERPASS /path/to/backup/dir/ innoba ...
- 干货!最全羽毛球技术动态分解gif图
羽毛球的技术千变万化,但是离不开最基本的击球方法.下面通过一组形象的动态图,给你展现羽毛球的基本动作.大家,务必要收藏起来,慢慢体会哦! 一.发球 二.前场技术 1.网前球 2.搓球 3.勾球 4.推 ...
- python itertools 模块讲解
1.介绍itertools 是python的迭代器模块,itertools提供的工具相当高效且节省内存. 使用这些工具,你将能够创建自己定制的迭代器用于高效率的循环. - 无限迭代器 itertool ...
- Kubernetes 1.12公布:Kubelet TLS Bootstrap与Azure虚拟机规模集(VMSS)迎来通用版本号
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/M2l0ZgSsVc7r69eFdTj/article/details/82880341 https: ...