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 相关文章推荐
js 格式化时间日期函数小结
Mar 20 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 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 采集心得技巧
2009/05/15 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
浅谈php和.net的区别
2014/09/28 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php强制下载文件函数
2016/08/24 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
JS event使用方法详解
2008/04/28 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
js实现碰撞检测
2021/01/29 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
青蓝工程实施方案
2014/03/27 职场文书
给校长的建议书100字
2014/05/16 职场文书
律师授权委托书范本
2014/10/07 职场文书
2014年人事部工作总结
2014/12/03 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
实习证明模板
2015/06/16 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
高三物理教学反思
2016/02/20 职场文书
七年级生物教学反思
2016/02/20 职场文书