首页
所有分类
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 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
基于jquery实现导航菜单高亮显示（两种方法）
Aug 23 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 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) VOLVO(1) 沃尔沃(1) 晶体管(2) 77A(2) 摩托罗拉(1) S900(1) MOTOROLA(1) 66-XI(1) ETON(1)
You might like
PHP的变量总结 新手推荐
2011/04/18 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
（推荐一个超好的JS函数库）S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
Javascript学习笔记之 对象篇（一） : 对象的使用和属性
2014/06/24 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python实现随机梯度下降法
2020/03/24 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
使用python实现飞机大战游戏
2020/03/23 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
python中return如何写
2020/06/18 Python
Python库安装速度过慢解决方案
2020/07/14 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
Jacadi Paris美国官方网站：法国童装品牌
2017/10/15 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技