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 相关文章推荐
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
JavaScript表单验证实现代码
May 22 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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正则走开
2008/03/15 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
虚拟机下载python是否需要联网
2020/07/27 Python
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
课改先进个人汇报材料
2014/01/26 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
班级文化标语
2014/06/23 职场文书
单位委托书怎么写
2014/08/02 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
Python实现视频中添加音频工具详解
2021/12/06 Python