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 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
原生Javascript+HTML5一步步实现拖拽排序
Jun 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 信息采集程序代码
2009/03/17 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
prototype class详解
2006/09/07 Javascript
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
原生js实现购物车功能
2020/09/23 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
python实现解数独程序代码
2017/04/12 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
Numpy数组的保存与读取方法
2018/04/04 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python判断数字是否是超级素数幂
2018/09/27 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
征婚广告词
2014/03/17 职场文书
仓库管理计划书
2014/05/04 职场文书
艾滋病宣传标语
2014/06/25 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
师德师风个人整改措施
2014/10/27 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python