首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

在layui中使用form表单监听ajax异步验证注册的实例

Posted in Javascript onSeptember 03, 2019

今天给大家介绍的是当下很流行的框架layui中的一个小案例、就是form表单监控提交并且使用ajax异步提交验证数据。在layui中我们想使用哪个模块就要layui.use('form',function{});这种形式要引用form内置模板，下面是HTML全部代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>注册</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="keywords" content="雷小天">
 <meta name="description" content="雷小天博客-layui中使用form表单监听异步验证注册">
 <link rel="stylesheet" href="__RES__/layui/css/layui.css" rel="external nofollow" >
 <link rel="stylesheet" href="__RES__/css/global.css" rel="external nofollow" >
</head>
<body>

<div class="fly-header layui-bg-black">
 <div class="layui-container">
 <a class="fly-logo" href="{:U('device/getinfo')}" rel="external nofollow" >
  <img src="__RES__/images/logo.png" alt="layui">
 </a>
 

 <ul class="layui-nav fly-nav-user">
  <!-- 未登入的状态 -->
  <li class="layui-nav-item">
  <a class="iconfont icon-touxiang layui-hide-xs" href="user/login.html" rel="external nofollow" ></a>
  </li>
  <li class="layui-nav-item">
  <a href="{:U('device/login')}" rel="external nofollow" rel="external nofollow" >登入</a>
  </li>
  <li class="layui-nav-item">
  <a href="javascript::void;" rel="external nofollow" >注册</a>
  </li>
  
 </ul>
 </div>
</div>

<div class="layui-container fly-marginTop">
 <div class="fly-panel fly-panel-user" pad20>
 <div class="layui-tab layui-tab-brief" lay-filter="user">
  <ul class="layui-tab-title">
  <li><a href="{:U('device/login')}" rel="external nofollow" rel="external nofollow" >登入</a></li>
  <li class="layui-this">注册</li>
  </ul>
  <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
  <div class="layui-tab-item layui-show">
   <div class="layui-form layui-form-pane">
   <form method="post">
    <div class="layui-form-item">
    <label for="L_username" class="layui-form-label">手机</label>
    <div class="layui-input-inline">
    <input type="text" id="signuppassdata" name="phone" required lay-verify="required" autocomplete="off" class="layui-input">
    </div>
    </div>

    <div class="layui-form-item">
    <label for="L_username" class="layui-form-label">卡号</label>
    <div class="layui-input-inline">
     <input type="text" id="cardno" name="cardno" required lay-verify="required" autocomplete="off" class="layui-input">
    </div>
    </div>


    <div class="layui-form-item">
    
    <button class="layui-btn" type="submit" lay-filter="reg" lay-submit="" id="signuppass" >立即注册</button>

    </div>
    
   </form>
   </div>
  </div>
  </div>
 </div>
 </div>

</div>

<div class="fly-footer">
 <p>开门社区 2018 © <a href="http://www.100txy.com/" rel="external nofollow" target="_blank">100txy.com 出品</a></p>
 <p><a href="JavaScript::void;" rel="external nofollow" target="_blank">雷小天博客</a></p>
</div>

<script src="__PUBLIC__/mobile/js/jquery.js"></script>
<script src="__RES__/layui/layui.js"></script>
<script>

//监听提交
layui.use('form', function(){
 var form = layui.form;
 form.on('submit(reg)', function(data){
 // layer.msg(JSON.stringify(data.field));//弹出json格式所有表单的值
 var phone=data.field.phone;
 var cardno=data.field.cardno;
 if(phone.length!=11){
  layer.msg('请输入有效的手机号码', {icon: 2});
  return false;
 }
 var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
 if(!myreg.test(phone)){
  layer.msg('请输入有效的手机号码', {icon: 2});
  return false;
 }
 if(cardno.length!=8){
  layer.msg('请输入有效的卡片内码！', {icon: 2});
  return false;
 }
 $.ajax({
  type:"POST",
  url:"index.php?m=Home&c=Device&a=ajax_reg",
  data:"phone="+phone+"&cardno="+cardno,
  dataType:"json",
  success:function(data){
  if(data.status=='yes'){
   layer.msg('注册成功！', {icon: 1});
   var url = "{:U('device/getinfo')}"; //成功跳转的url
   setTimeout(window.location.href=url,2000);
  }else{
   layer.msg(data.msg, {icon: 2});
  }
  },
 });
 return false;
 });
});

</script>

</body>
</html>

下面是ajax_reg逻辑方面，这是我的业务逻辑大家没必要照搬，知道怎么用就行了

//表单异步提交
 public function ajax_reg(){
 if(isset($_POST['phone'])&&isset($_POST['cardno'])){
  $roomnostr = M("userinfo")->where(array('cardno'=>$_POST['cardno']))->getField('roomno');
  if(!$roomnostr){
   echo json_encode(array('status'=>'no','msg'=>'无效的卡片内码，请联系管理员！'));
   exit();
  }
  $wechatinfo=$_SESSION['wechatinfo'];
  if(!$wechatinfo){
   echo json_encode(array('status'=>'no','msg'=>'页面已过期请重新扫码进入！'));
   exit();
  }

  $result= M("weixin")->where(array('openid'=>$wechatinfo['openid']))->field('is_signup,area_id')->find();
  $areaArr=explode('-',$result['area_id']);
  // $result=M("weixin")->getFieldByOpenid($_POST['openid'],'is_signup');
  if(isset($result)&&$result['is_signup']==1){//如果注册过一次下次只更新门区
  $new_area=$roomnostr;
   $reg=M("weixin")->where(array('openid'=>$wechatinfo['openid']))->save(array('area_id'=>$new_area));
   echo json_encode(array('status'=>'no','type'=>'signuppass','msg'=>'你已注册为该门区的租户，请勿重复注册！'));
   exit();
  }else{
  $data=array(
   'is_signup'=>1,
   'phone'=>$_POST['phone'],
   'openid'=>$wechatinfo['openid'],
   'nickname'=>$wechatinfo['nickname'],
   'sex'=>$wechatinfo['sex'],
   'headimgurl'=>$wechatinfo['headimgurl'],
   'area_id'=>$roomnostr,
   'regtime'=>time(),
   'cardno'=>$_POST['cardno'],
  );
  $reg=M("weixin")->add($data);
  if($reg){
   echo json_encode(array('status'=>'yes','msg'=>'恭喜你，注册成功！'));
  }
  }

 }
 }

以上这篇在layui中使用form表单监听ajax异步验证注册的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

在layui中使用form表单监听ajax异步验证注册的实例

- Author -

雷小天博客

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
JavaScript 继承详解（一）
Jul 13 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
Javascript动画效果（1）
Oct 11 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
React学习笔记之事件处理（二）
Jul 02 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 #Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 #Javascript
Layui给switch添加响应事件的例子
Sep 03 #Javascript
layui--js控制switch的切换方法
Sep 03 #Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 #Javascript
layui中的switch开关实现方法
Sep 03 #Javascript
微信小程序表单验证插件WxValidate的二次封装功能（终极版）
Sep 03 #Javascript
RustDesk(1) 声卡驱动(1) Debian(1) 蓝牙(1) 蓝屏(1) 虚拟键盘(1) 鸿蒙3.0(1) 蓝牙耳机(1) win7(2) 鸿蒙(2)
You might like
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
Python中如何引入第三方模块
2020/05/27 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
python中selenium库的基本使用详解
2020/07/31 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
python 用struct模块解决黏包问题
2020/11/07 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
应届生个人求职信模板
2013/11/26 职场文书
初中音乐教学反思
2014/01/12 职场文书
12岁生日感言
2014/01/21 职场文书
法人委托书范本
2014/04/04 职场文书
学校火灾防控方案
2014/06/09 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
2016继续教育研修日志
2015/11/13 职场文书
幼师必备：幼儿园期末教师评语50条
2019/11/01 职场文书
python常见的占位符总结及用法
2021/07/02 Python