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复选框CHECKBOX全选、反选
Aug 30 Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
JSONP基础知识详解
Mar 19 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 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部分常见问题总结
2006/10/09 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
python获取服务器响应cookie的实例
2018/12/28 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
scrapy头部修改的方法详解
2020/12/06 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
会计毕业生自我鉴定
2013/11/04 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
统计员岗位职责
2015/02/11 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书