如何实现一个输入框和按钮，点击按钮时校验密码长度，若长度小于等于6则在小程序界面中显示“长度应大于6",若长度大于6，则直接将内容上传至数据库？

Question

我想要达到的结果

微信开发者工具：实现一个输入框和按钮，点击按钮时校验密码长度，若长度小于等于6则在小程序界面中显示“长度应大于6",若长度大于6，则直接将内容上传至数据库。（需使用云函数完成数据的上传功能）

Answer 1

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const {
    desc
  } = event;
  if (desc != null && desc.length > 6) {
    cloud.database().collection('result').add({
      data: {
        desc
      }
    })
  }
  return {
    success: true,
  }
}

// pages/lengthGt10AndSave/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    desc: null,
    message: null
  },
  onDescInput(e) {
    this.setData({
      desc: e.detail.value
    })
  },
  onClick(e) {
    const desc = this.data.desc
    if (desc != null && desc.length > 6) {
      wx.cloud.callFunction({
        name: 'lengthGt6AndSave',
        data: {
          desc
        }
      }).then(console.log).then(() => this.setData({
        message: null
      }))
    } else {
      this.setData({
        message: '长度应大于6'
      })
    }
  }
})

<!--pages/lengthGt10AndSave/index.wxml-->
<input class="input" bindinput="onDescInput" value="{{desc}}" placeholder="请输入内容" />
<view class="view">{{message!=null?message:''}}</view>
<button class="button" bindtap="onClick">提交</button>

/* pages/lengthGt10AndSave/index.wxss */
.input{
  border: green 1px solid;
}
.view{
  background-color: grey;
  color: red;
  margin-top: 1rem;
}
.button{
  background-color: green;
  margin-bottom: 1rem;
}