layui表单提交

最新推荐文章于 2024-03-27 12:34:06 发布

SHUIPING_YANG

最新推荐文章于 2024-03-27 12:34:06 发布

阅读量3.6k

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/zhezhebie/article/details/89326495

版权

layui 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

1.js获取url参数:

function GetQueryString(name){
 var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
 var r = window.location.search.substr(1).match(reg);
 if(r!=null)return  unescape(r[2]); return null;
}

2.layui验证,请求后台接口

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>邀请注册</title>
  <link rel="stylesheet" href="{{ asset('assets/js/lib/layui/css/layui.css') }}" media="all">
</head>
<body>
  <div class="layui-container">
    <div class="layui-row">
      <h1 class="layui-elip" style="text-align: center;margin: 30px 0 30px 0">
        林晗邀请您成为他的渠道推广员
      </h1>
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <label class="layui-form-label"><font style="color:red"> * </font>姓名:</label>
          <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required|name" placeholder="请输入您的称呼" class="layui-input">
            <input type="hidden" name="pid" value="{{request('pid',0)}}">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label"><font style="color:red"> * </font>邮箱:</label>
          <div class="layui-input-block">
            <input type="email" name="email" required  lay-verify="required|email" placeholder="请输入邮箱,后续使用邮箱作为登陆凭证" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"><font style="color:red"> * </font>密码:</label>
          <div class="layui-input-inline">
            <input type="password" name="password" required lay-verify="required|password" placeholder="请输入密码" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux"><font style="color:red"> * </font>最少六位</div>
        </div>

        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label"><font style="color:red"> * </font>手机区号:</label>
            <div class="layui-input-inline" style="width: 220px;">
              <select id="country_id" name="area_phone_number" lay-verify="required"></select>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label"><font style="color:red"> * </font>手机号:</label>
              <div class="layui-input-inline" style="width: 200px;">
                <input type="number" name="telephone" required  lay-verify="required|number" class="layui-input">
              </div>
            </div>
          </div>

          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">补充说明:</label>
            <div class="layui-input-block">
              <textarea name="remark" placeholder="请输入额外想补充的." class="layui-textarea"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" style="background: #ff760c" lay-submit lay-filter="formDemo">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </body>

  <script type="text/javascript" src="{{ asset('assets/js/lib/jquery1.8.3.min.js') }}"></script>
  <script src="{{ asset('assets/js/lib/layui/layui.js') }}" charset="utf-8"></script>
  {{-- 城市国家 --}}
  <script type="text/javascript" src="{{ asset('assets/js/lib/public_data.js') }}"></script>
  <script>
    // 区号下拉列表
    var op='<option value="">请选择手机区号</option>';
    $.each(AREA_CODE, function(idx, obj) {
      op+='<option value="'+obj.area_phone_number+'">'+obj.chinese_name+' + '+obj.area_phone_number+'</option>';
    });
    $('#country_id').html(op);

    // 表单验证以及提交
    layui.use('form', function(){
      var form = layui.form;
      // 字段验证,过滤
      form.verify({
        name: function(value, item){ //value：表单的值、item：表单的DOM对象
          if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
            return '姓名不能有特殊字符';
          }
          if(/(^\_)|(\__)|(\_+$)/.test(value)){
            return '姓名首尾不能出现下划线\'_\'';
          }
          if(/^\d+\d+\d$/.test(value)){
            return '姓名不能全为数字';
          }
        }
        //我们既支持上述函数式的方式，也支持下述数组的形式
        //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
        ,password: [
        /^[\S]{6,20}$/,
        '密码必须6到20位，且不能出现空格'
        ]
      });
      //监听提交,发送请求
      form.on('submit(formDemo)', function(data){
        $.post(
          "/api/follow/addChannelAssistant",
          data.field,
          function(res){
            if(res.status){
              layer.msg(res.message, {time: 2000});
            var url = "/follow/showAddChannelAssistant"; //
            setTimeout(window.location.href=url,2000);
          }else{
            layer.msg(res.message, {time: 2000});
          }
        },'json');
        return false;
      });
    });
 </script>

 </html>

SHUIPING_YANG

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
layui表单提交

1.js获取url参数:function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]);...
复制链接

扫一扫