layui的表单提交以及验证和修改弹框的实例


Posted in Javascript onSeptember 09, 2019

HTML

<div class="layui-form">
 <input type="text" class="txt" name="newName" lay-verify="newName" lay-verType="tips" placeholder="请输入姓名">
 <input type="text" class="txt" name="newCard" lay-verify="newCard" lay-verType="tips" placeholder="请输入身份证">
 <input type="text" class="txt" name="newPhone" lay-verify="newPhone" lay-verType="tips" placeholder="请输入电话号码">
 <input type="text" class="txt" name="newEmail" lay-verify="newEmail" lay-verType="tips" placeholder="请输入电子邮箱">
 <button class="btnStyle" lay-submit lay-filter="btn">提交</button>
</div>

JS

<script type="text/javascript">
  layui.use(['jquery','form','layer'],function () {
   var $ = layui.jquery;
   var layer = layui.layer;
   var form = layui.form;
    // 验证
    form.verify({
      newName: [/\S/,'姓名不能为空' ] ,
      newCard: function (value) {
        if(!/\S/.test(value)){
          $("input[name='newCard']").focus();
          return '原身份证不能为空';
        }
        if(!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)){
          $("input[name='newCard']").focus();
          return '原身份证格式有误';
        }
      },
      newPhone: function (value) {
        if(!/\S/.test(value)){
          $("input[name='newPhone']").focus();
          return '电话号码不能为空';
        }
        if(!/^1[34578]\d{9}$/.test(value)){
          $("input[name='newPhone']").focus();
          return '电话号码格式有误';
        }
      },
      newEmail: function (value) {
        $("input[name='newEmail']").focus();
        if(!/\S/.test(value)){
          $("input[name='newEmail']").focus();
          return '电子邮件不能为空';
        }
        if(!/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/.test(value)){
          $("input[name='newEmail']").focus();
          return '电子邮件格式有误';
        }
      },
    });
    // 验证成功后执行操作
    form.on('submit(btn)',function () {
      console.log('验证成功')
    })

  })
</script>

以上这篇layui的表单提交以及验证和修改弹框的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
uploadify多文件上传参数设置技巧
Nov 16 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 #Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 #Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 #Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 #Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 #Javascript
微信小程序 checkbox使用实例解析
Sep 09 #Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 #Javascript
You might like
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
Vue.directive()的用法和实例详解
2018/03/04 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
Python引用模块和查找模块路径
2016/03/17 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
python制作简单五子棋游戏
2019/06/18 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
Python实现动态循环输出文字功能
2020/05/07 Python
Django权限控制的使用
2021/01/07 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
MySQL 数据 data 基本操作
2022/05/04 MySQL
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers