当前位置： 移动技术网 > IT编程>开发语言>JavaScript > layui的表单提交以及验证和修改弹框的实例

layui的表单提交以及验证和修改弹框的实例

2019年09月14日  | 移动技术网IT编程  | 我要评论

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的表单提交以及验证和修改弹框的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网