精华内容
下载资源
问答
  • 微信小程序表单提交

    千次阅读 2018-11-21 09:32:27
    点击按钮提交表单查询,查询成功后显示信息补充按钮,点击信息补充按钮跳转到信息补充页面 1、wxml <view class='mian'> <form bindsubmit='submitForm'> <view class='...

     点击按钮提交表单查询,查询成功后显示信息补充按钮,点击信息补充按钮跳转到信息补充页面

    1、wxml

    <view class='mian'>
      <form bindsubmit='submitForm'>
        <view class='item'>
          <input type="text" placeholder="姓名" name="input_name" value="" class="input_search" />
        </view>    
        <view>
          <button class='bgBtn' formType='submit'>查询</button>
        </view>
      </form>
      <view class='addInfo' wx:if="{{condition}}" >
        <button class='bgBtn' bindtap="addInfoTap">信息补充</button>
      </view>
    </view>

    2、wxss

    .mian{
      margin: 0 20rpx;
    }
    .bgBtn{
      margin: 20rpx 0;
      background: red !important;
      color: #fff !important;
      font-size: 28rpx;
      line-height: 100rpx;
      display: block;
      text-align: center;
    }
    .item{
      margin: 10rpx 0;
    }
    .input_search{
      border: 2rpx solid #ccc;
      border-radius: 8rpx;
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 20rpx;
      font-size: 30rpx;
    }

    3、js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        condition: false,
        name: ''
      },
      submitForm: function(event){
        console.log(event);
        var that = this;
        wx.request({
          url: "test.php",
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          method: "POST",
          data: {
            name: event.detail.value.input_name
          },
          success: function (res) {
            console.log(res);  
            var res = res.data;
            that.setData({
              condition: true,
              name: res[0].name
            });    
          }
        });
      },
      addInfoTap: function(event) {
        wx.navigateTo({
          url: '../addinfo/addinfo?name=' + this.data.name
        });
      }
    })

    event.detail.value.input_name:点击表单查询的event获取表单内所有输入框的值,输入框必须有name。

    var that = this; 数据提交后this就已经改变了,不再是页面this了,所有把this对象复制到临时变量that。

    wx.navigateTo({});页面跳转

    展开全文
  • 适用范围:小程序的所有基础库 wxml中的绑定 <textarea placeholder="文本类型" bindblur='no_focus' bindfocus="focus" data-name= "c"></textarea> <input placeholder="inpu...

    实例作用:帮助开发者获取input、text以及页面data数据进行提交
    适用范围:小程序的所有基础库

    wxml中的绑定

     <textarea placeholder="文本类型"   bindblur='no_focus' bindfocus="focus" data-name= "c"></textarea>
     <input placeholder="input类型"  bindblur='no_focus' bindfocus="focus" data-name= "p"></input>
    其他类型可以通过赋值的形式进行赋值传递 this.data.formData;
    

    绑定事件

    focus(e) {
          let name = e.currentTarget.dataset.name
          let value = e.detail.value;
          this.setData({
            ["formData." + name ]: value
          })
        },
    
        no_focus(e) {
          let name = e.currentTarget.dataset.name
          let value = e.detail.value;
          this.setData({
            ["formData." + name ]: value
          })
        },
    

    验证类

    function checkPhone(string){
    
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
      if (string==undefined) {
        return false;
      } else if (string.length < 11) {
        return false;
      } else if (!myreg.test(string)) {
        return false;
      } else {
        return true;
      }
    }
    
    function checkRequired(string){
      if(string==undefined){
        return false;
      }else{
        return true;
      }
    }
    
    function checkCardId(string){
      var code = string;
    
      var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " };
      var tip = "";
      var pass = true;
      var reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
      if (!code || !code.match(reg)) {
        tip = "身份证号格式错误";
        pass = false;
      } else if (!city[code.substr(0, 2)]) {
        tip = "地址编码错误";
        pass = false;
      } else {
        //18位身份证需要验证最后一位校验位
        if (code.length == 18) {
          code = code.split('');
          //∑(ai×Wi)(mod 11)
          //加权因子
          var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
          //校验位
          var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
          var sum = 0;
          var ai = 0;
          var wi = 0;
          for (var i = 0; i < 17; i++) {
            ai = code[i];
            wi = factor[i];
            sum += ai * wi;
          }
          var last = parity[sum % 11];
          if (parity[sum % 11] != code[17]) {
            tip = "校验位错误";
            pass = false;
          }
        }
      }
      console.log(pass)
      if (pass) { return true }
      if (!pass) return false;
    
    }
    
    module.exports = {
      checkPhone,
      checkRequired,
      checkCardId
    }
    

    提交数据

    import * as verify from "../../utils/verify";
    Page({
      data: {
        formData: ''
      },
      submitForm:function(){
        let { tabId, tabTitle } = this.data;
        let { content } = this.data.formData
    
        if (!verify.checkRequired(tabId)) {
          return app.myToast('请选择反馈类型');
        }
    
        if (!verify.checkRequired(content)) {
          return app.myToast('请选择反馈内容');
        }
    
      }
    })
    
    展开全文
  • 微信提交表单时e.detail.value值为undefined。怎么解决。
  • 微信小程序表单提交传值

    千次阅读 2018-05-07 09:51:30
    1. 表单提交事件全局变量存储在app.jsApp({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录...

    1. 表单提交事件

    全局变量存储在app.js

    App({

      onLaunch: function () {

        // 展示本地存储能力

        var logs = wx.getStorageSync('logs') || []

        logs.unshift(Date.now())

        wx.setStorageSync('logs', logs)

        // 登录

        wx.login({

          success: res => {

            // 发送 res.code 到后台换取 openId, sessionKey, unionId

          }

        })

        // 获取用户信息

        wx.getSetting({

          success: res => {

            if (res.authSetting['scope.userInfo']) {

              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框

              wx.getUserInfo({

                success: res => {

                  // 可以将 res 发送给后台解码出 unionId

                  this.globalData.userInfo = res.userInfo

     

                  // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回

                  // 所以此处加入 callback 以防止这种情况

                  if (this.userInfoReadyCallback) {

                    this.userInfoReadyCallback(res)

                  }

                }

              })

            }

          }

        })

      },

      globalData: {

        userInfo: null  

      }    //全局变量

    })

     

     

    登录页面:index.wxml

    <view>

    <form bindsubmit="formSubmit">  //绑定事件

    <view>

    <label for="username">用户名:</label>

    <input name="username" placeholder="请输入用户名"/>

    </view>

    <view>

    <label for="password">密码:</label>

    <input name="password" placeholder="请输入密码"/>

    </view>

    <button class="btn_login" formType="submit">登录</button>//登录按钮

    </form>

    </view>

     

     

    登录页面js:  index.js

    //获取应用实例

    const app = getApp()

    Page({

      data: {

      },

      formSubmit: function (e) {  //表单提交绑定事件

        if (e.detail.value.username.length == 0 || e.detail.value.password.length == 0) {

          wx.showToast({

            title: '用户名或密码不得为空!',

            icon: 'loading',

            duration: 1500

          })

          setTimeout(function () {

            wx.hideToast()

          }, 2000)

        }  else {

          wx.request({  //后台交互

            url: 'http://localhost/xxxx/zzzz/user_login',

            //指向方法, 本地用http:\\...   线上必须是https:\\...

            header: {

              "Content-Type": "application/x-www-form-urlencoded"

            },   //标明格式, 必不可少

            method: "POST",   //传递数据类型

            data: { login_info: e.detail.value.username, password: e.detail.value.password },   //传输数据

            success: function (res) {   //返回信息,类似于ajax-json交互

              if (res.data.status == 1) {

                wx.showToast({

                  title: 'success',

                  icon: 'success',

                  duration: 1500

                }),

                  getApp().globalData.userInfo = res.data.username;

                  //将信息存储到app.js的全局变量里,方便以后调用,

                  wx.navigateTo({

                  url: '../reg/reg'

                  })   //跳转下一页面

              } else {

                wx.showToast({

                  title:'failed',

                  icon: 'success',

                  duration: 1000

                })

              }

            }

          })

        }

      },

    })

     

    登录后台逻辑:simple.php里的user_login

    function user_login(){

        $login_info = IFilter::act(IReq::get('login_info','post'));

        $password   = IReq::get('password','post');

        $pwd=md5($password);

        $sellerObj = new IModel('user');

        $swhere   = ' username = "'.$login_info.'" and password = "'.$pwd.'"';

        $checkCount = $sellerObj->query($swhere,"id",false,'',1);

        if(!empty($checkCount)){

            echo json_encode(array('status'=>1,'username'=>$login_info));

        }else{

            echo json_encode(array('status'=>0));

            //必须返回json格式

        }

    }

     

     

    跳转页面js逻辑处理: reg.js

    //获取应用实例

    const app = getApp()

    Page({

      onLoad: function (options) {

        this.setData({

          username: getApp().globalData.userInfo

          //页面加载时获取userInfo变量信息赋值给username

        })

      },

    })

     

    跳转页面: reg.wxml

    <view>

        <view>

          <label for="username">用户名:{{username}}</label>

        </view>

    </view>

     

    展开全文
  • 表单提交事件全局变量存储在app.jsApp({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 ...

    表单提交事件

    全局变量存储在app.js

    App({

      onLaunch: function () {

        // 展示本地存储能力

        var logs = wx.getStorageSync('logs') || []

        logs.unshift(Date.now())

        wx.setStorageSync('logs', logs)

        // 登录

        wx.login({

          success: res => {

            // 发送 res.code 到后台换取 openId, sessionKey, unionId

          }

        })


        // 获取用户信息

        wx.getSetting({

          success: res => {

            if (res.authSetting['scope.userInfo']) {

              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框

              wx.getUserInfo({

                success: res => {

                  // 可以将 res 发送给后台解码出 unionId

                  this.globalData.userInfo = res.userInfo

                  // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回

                  // 所以此处加入 callback 以防止这种情况

                  if (this.userInfoReadyCallback) {

                    this.userInfoReadyCallback(res)

                  }

                }

              })

            }

          }

        })

      },

      globalData: {

        userInfo: null  

      }    //全局变量

    })


    登录页面:index.wxml

    <view>

    <form bindsubmit="formSubmit">  //绑定事件

    <view>

    <label for="username">用户名:</label>

    <input name="username" placeholder="请输入用户名"/>

    </view>

    <view>

    <label for="password">密码:</label>

    <input name="password" placeholder="请输入密码"/>

    </view>

    <button class="btn_login" formType="submit">登录</button>//登录按钮

    </form>

    </view>


    登录页面js:  index.js

    //获取应用实例

    const app = getApp()

    Page({

      data: {

      },

      formSubmit: function (e) {  //表单提交绑定事件

        if (e.detail.value.username.length == 0 || e.detail.value.password.length == 0) {

          wx.showToast({

            title: '用户名或密码不得为空!',

            icon: 'loading',

            duration: 1500

          })

          setTimeout(function () {

            wx.hideToast()

          }, 2000)

        }  else {

          wx.request({  //后台交互

            url: 'http://localhost/xxxx/zzzz/user_login',

            //指向方法, 本地用http:\\...   线上必须是https:\\...

            header: {

              "Content-Type": "application/x-www-form-urlencoded"

            },   //标明格式, 必不可少

            method: "POST",   //传递数据类型

            data: { login_info: e.detail.value.username, password: e.detail.value.password },   //传输数据

            success: function (res) {   //返回信息,类似于ajax-json交互

              if (res.data.status == 1) {

                wx.showToast({

                  title: 'success',

                  icon: 'success',

                  duration: 1500

                }),

                  getApp().globalData.userInfo = res.data.username;

                  //将信息存储到app.js的全局变量里,方便以后调用,

                  wx.navigateTo({

                  url: '../reg/reg'

                  })   //跳转下一页面

              } else {

                wx.showToast({

                  title:'failed',

                  icon: 'success',

                  duration: 1000

                })

              }

            }

          })

        }

      },

    })


    登录后台逻辑:simple.php里的user_login

    function user_login(){

        $login_info = IFilter::act(IReq::get('login_info','post'));

        $password   = IReq::get('password','post');

        $pwd=md5($password);

        $sellerObj = new IModel('user');

        $swhere   = ' username = "'.$login_info.'" and password = "'.$pwd.'"';

        $checkCount = $sellerObj->query($swhere,"id",false,'',1);

        if(!empty($checkCount)){

            echo json_encode(array('status'=>1,'username'=>$login_info));

        }else{

            echo json_encode(array('status'=>0));

            //必须返回json格式

        }

    }


    跳转页面js逻辑处理: reg.js

    //获取应用实例

    const app = getApp()

    Page({

      onLoad: function (options) {

        this.setData({

          username: getApp().globalData.userInfo

          //页面加载时获取userInfo变量信息赋值给username

        })

      },

    })



    跳转页面: reg.wxml

    <view>

        <view>

          <label for="username">用户名:{{username}}</label>

        </view>

    </view>

    展开全文
  • 一、首先先把小程序页面写好,这个不多说了,直接上代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view> 昵称:<input type="text" style="border:1px solid #f5f5f5;" name=...
  • index.js formSubmit: function(e) { var that = this var areaid = that.data.index // console.log(that.data.index,'用户选择的区域下标') // console.log(that.data.selectData,'所有区域') ...
  • # js ``` formSubmit: function (e) { console.log(e); ... console.log(e.detail);... console.log(typeof e.detail.value.bookauthor);... die('Could not connect: ' .... values ('".$_POST['bookname']."','".$_POST...
  • 效果imagehtml代码是否公开信息手机号密码性别男女提交重置{{warn ? warn : "是否公开信息:"+isPub+",手机号:"+phone+",密码:"+pwd+",性别:"+sex}}css代码.section{display: flex;flex-direction: row;margin...
  • 主要为大家详细介绍了微信小程序表单验证form提交错误提示效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1.简历一个简单的表单,点击‘提交’按钮时,提交表单内容2. 以姓名框为例.wxml #调用formSubmit函数 提交class为.wxss中自定义的样式,input标签中的name属性为必填!!并且值是唯一的,只有这样才能获取到表单中的...
  • 主要为大家详细介绍了微信小程序表单弹窗实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 实现思路: 给每一个input绑定相同的value对象,提交成功后把这个对象赋值为空. 下面看代码: <form bindsubmit='formsubmit'&...
  • 微信小程序表单校验提交重置,数据互通(没接触过小程序,第一次写小程序,简单做个总结),代码中注释比较详细,可以多注意 微信小程序页面 index.js页面 import WxValidate from '../../utils/WxValidate.js'//小程序表单...
  • 一般使用form标签来写表单,以为这个样子可以减轻js负担,本节来讲如何调教表单到后台 <form bindsubmit="goform"> <input class="" name="name" placeholder="姓名" /> <input class="" name=...
  • 1、控件引用了其它两个组件:select组件和dateSelect组件 1.1、select组件 数据选择【类似web的select控件】 1.2、dateSelect组件 日期选择【阴历、阳历双选】 2、调用时引用、设置、事件处理 2.1引用:面页
  • 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的 ...       1.小程序相对于...
  • 主要介绍了微信小程序-form表单提交,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了微信小程序实现提交input信息到后台的方法,结合实例形式分析了微信小程序提交input信息到后台相关事件响应与数据处理操作技巧,需要的朋友可以参考下
  • 微信小程序表单

    千次阅读 2020-09-07 18:13:15
    微信小程序表单 跟朋友做了一个量衣定制的小程序页面,做了主要是采集用户的身体数据,分享给大家,复制代码过去即可使用! 效果: 代码: wxml: <view class='baseInfo'> <text>基本信息</text&...
  • 微信小程序 - form表单提交

    千次阅读 2019-04-17 16:57:16
    微信小程序 - form表单提交 说明: 文章记录 微信小程序端使用post请求访问服务器时,将整个表单作为参数传递到服务器。 语言:微信小程序、java SpringMVC 微信小程序前端 <!-- xx.wxml --> <form ...
  • 主要介绍了微信小程序中form 表单提交和取值实例详解的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序 表单Form实例详解的相关资料,这里对form 表单进行了详细介绍,并附实例代码,需要的朋友可以参考下
  • 目录 问题描述 解决方法 问题描述 wxml格式如下: js文件如下: ...重命名提交函数:formSubmit改为formSubmit js文件: wxml文件: 运行结果: 问题解决,接着下一个! ...
  • this.setData({ date:date.detail.value }) }, //成功提交按钮 formAdd:function(e){ console.log(e) let name = this.data.name; let city=this.data.city; let region=this.data.region; let code=this.data.code;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,010
精华内容 3,204
关键字:

微信小程序表单提交

微信小程序 订阅