小程序开发-表单提交

最新推荐文章于 2024-08-07 16:57:39 发布

Las_wang

最新推荐文章于 2024-08-07 16:57:39 发布

阅读量356

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_38576764/article/details/112365210

小程序专栏收录该内容

7 篇文章

订阅专栏

这篇博客展示了如何使用HTML创建一个登录表单，并通过JavaScript进行用户输入的账号和密码验证。当账号或密码为空时，会显示弹窗提示用户输入。此外，代码还涉及到了微信小程序的openid和session_key的获取，以及使用这些信息向服务器发送登录请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

    <form bindsubmit='formSubmit'>
      <view class="input-option">
        <view class="title">
          <image id='tel-icon' src="{{telIcon}}" mode="widthFix"></image>账号
        </view>
        <view>
          <input class="weui-input" name="user" auto-focus placeholder="请输入您的账号" placeholder-class="placeholder"
            bindinput="user" />
        </view>
      </view>
      <view class="input-option">
        <view class="title">
          <image id='pwd-icon' src="{{pwdIcon}}" mode="widthFix"></image>密码
        </view>
        <view>
          <input class="weui-input" name="pwd" password="true" placeholder="请输入您的密码 "
            placeholder-class="placeholder" bindinput="pwd" />
        </view>
      </view>
      <button class="login-btn" formType="submit">登录</button>
    </form>

formSubmit:function(e){
    var that = this;
    var user = e.detail.value.user;
    var pwd = e.detail.value.pwd;
    if(user == '' || user == null){
      wx.showModal({
        title: '验证失败',
        showCancel: false,
        content: '请输入账号！',
        success: function (res) {}
      })
    }
    if(pwd == '' || pwd == null){
      wx.showModal({
        title: '验证失败',
        showCancel: false,
        content: '请输入密码！',
        success: function (res) {}
      })
    }
    var wechat = wx.getStorage({
      key: 'wechat',
      success:function(res){
        var openid = res.data.openid; //openid
        var session_key = res.data.session_key; //session_key
        wx.request({
          url: 'xxxxxx',
          method: 'get',
          data: {
            user: user,
            pwd: pwd,
            openid: openid,
            session_key: session_key,
          },
          success: function (res) {
            console.log(res);
            if(res.data.data.code == 0){
              wx.showToast({
                title: '登陆成功',
                duration: '2000',
              })
            }else{
              wx.showToast({
                title: res.data.data.msg,
                duration: '2000',
              })
            }
          },
          fail: function (res) {
            console.log("服务器开小差了，请重新尝试~")
          }
        })
      }
    })
  },

注意只能有一个autofocus 否则表单提交按钮无效