首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

layui.js实现的表单验证功能示例

Posted in Javascript onNovember 15, 2017

本文实例讲述了layui.js实现的表单验证功能。分享给大家供大家参考，具体如下：

该示例可针对文本框，手机，邮箱，textarea等格式进行验证

首先引入如下文件：

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

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>

完整示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3water.com layui 表单验证</title>
<script src="layui/layui.js"></script>
<script src="layui/layui.all.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<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>
<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>
</body>
</html>

运行效果如下：

layui.js实现的表单验证功能示例

layui.js实现的表单验证功能示例

- Author -

我是高手高手高高手

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 #Javascript
基于jQuery实现定位导航位置效果
Nov 15 #jQuery
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 #Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 #Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 #Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 #Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 #Javascript
BeautifulSoup4(2) tfx(1) ElementTree(1) NFS(1) tkFileDialog(1) Odoo(1) Logrotate(1) 黑名单(1) SeaTunnel(1) ftpserver(1)
You might like
用穿越火线快速入门php面向对象
2012/02/22 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
Bootstrap滚动监听（Scrollspy）插件详解
2016/04/26 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
JavaScript模块详解
2017/12/18 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
JS实现简易日历效果
2021/01/25 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
Python如何访问字符串中的值
2020/02/09 Python
MCM英国官网：奢侈皮具制品
2017/04/18 全球购物
加拿大休闲和工业服装和鞋类零售商：L’Équipeur
2018/01/12 全球购物
美国婴儿和儿童家具网上商店：ABaby.com
2018/07/02 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
中介公司区域经理岗位职责范本
2014/03/02 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
Python基础之数据结构详解
2021/04/28 Python
Python基础之元类详解
2021/04/29 Python
python基础之文件操作
2021/10/24 Python