在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的开源工具PACKER2.0.2
Nov 04 Javascript
javascript 变量作用域 代码分析
Jun 26 Javascript
JS 控制CSS样式表
Aug 20 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
JS 创建对象的模式实例小结
Apr 28 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
WHOIS类的修改版
2006/10/09 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
Yii使用技巧大汇总
2015/12/29 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
关于Python中异常(Exception)的汇总
2017/01/18 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
python getpass实现密文实例详解
2019/09/24 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
汉语专业应届生求职信
2013/10/01 职场文书
优秀生推荐信范文
2013/11/28 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
2014年底个人工作总结
2015/03/10 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL