在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异步验证注册的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
jquery选择器简述
Aug 31 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
npm qs模块使用详解
Feb 07 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
You might like
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
numpy基础教程之np.linalg
2019/02/12 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
Django models.py应用实现过程详解
2019/07/29 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
通过代码实例了解Python异常本质
2020/09/16 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
俞敏洪励志演讲稿
2014/04/29 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
常务副总经理任命书
2014/06/05 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
幼师自荐信范文
2015/03/06 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
世界文化遗产导游词
2019/08/07 职场文书
javascript对象3个属性特征
2021/11/17 Javascript