首页
所有分类
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 相关文章推荐
JavaScript的parseInt 取整使用
May 09 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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
封装(1) promise(2) 构造函数(1) gRPC(3) 验证表达式(1) 百度地图(1) PyAutoGUI(1) 继承(1) redis(3) XDM(3)
You might like
PHP之数组学习
2011/05/29 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
Javascript中的delete介绍
2012/09/02 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
基于NodeJS的前后端分离的思考与实践（三）轻量级的接口配置建模框架
2014/09/26 NodeJs
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
Javascript将数值转换为金额格式（分隔千分位和自动增加小数点）
2016/06/22 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
用WebStorm进行Angularjs 2开发(环境篇：Windows 10，Angular-cli方式)
2018/12/05 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
英国领先的家庭时尚品牌：Peacocks
2018/01/11 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
饲料采购员岗位职责
2013/12/19 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
劳资协议书范本
2014/04/23 职场文书
股东授权委托书范文
2014/09/13 职场文书
财务稽核岗位职责
2015/04/13 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
推普标语口号大全
2015/12/26 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server