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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
Node.js文件操作详解
Aug 16 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
js实现滑动进度条效果
Aug 21 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 防恶意刷新实现代码
2010/05/16 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
采用call方式实现js继承
2014/05/20 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
向雷锋同志学习倡议书
2015/04/27 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
Redis 常见使用场景
2021/08/30 Redis