小程序---验证input输入不能为空

WXML:

    <view class="regist">
注 册 页 面
</view>
<form bindsubmit='formSubmit'>
<text class="ntc" space="emsp" >昵  称：</text>
<input placeholder="请输入昵称" class="nic" name="nickname"></input>

<text class="npw" space="emsp">密  码：</text>
<input password="true" placeholder="请输入密码" class="pw" name="pwd"></input>
<text class="repw">重复密码：</text>
<input password='true' placeholder="再次输入密码" class="repw" name="repwd"></input>
<button form-type='submit' type='default' size="mini" class="submit">提交</button>
<button form-type='reset' type="default" size="mini" class="reset">重置</button>
</form>

JS

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  formSubmit: function (e) {
    //获取数据，简化代码
    var nickname = e.detail.value.nickname;
    var pwd = e.detail.value.pwd;
    var repwd = e.detail.value.repwd;
    //总体验证注册表单
    // if(nickname=='' || pwd=='' || repwd==''){
    //   wx.showToast({
    //     title:'注册项有空',
    //     icon:"none"
    //   })
    //   return;
    // }
    //验证顺序 昵称-》密码-》重复密码 
    if (nickname == '') {
      wx.showToast({
        title: '昵称不能为空',
        icon: "none"
      })
      return;
    } else if (pwd == '') {
      wx.showToast({
        title: '密码不能为空',
        icon: "none"
      })
      return;
    } else if (repwd == '') {
      wx.showToast({
        title: '重复密码不能为空',
        icon: "none"
      })
      return;
    }
    console.log(2222);
    //验证nickname数据是否为空
    //console.log(nickname);
    //拼接json对象
    var npr = { 'nickname': nickname, 'pwd': pwd, 'repwd': repwd };
    // wx.setStorageSync(nickname, npr);
    //注册时，移除空key,不给生成空key的机会
    // wx.removeStorageSync("");
    // console.log(wx.getStorageSync(""));
    // console.log(wx.getStorageInfoSync().keys);
  }
})

完整例子：

HTML

<form bindsubmit="formSubmit">
<view class="diy-biaodan{{itemData.data.margintop == 1 ? ' mt5 ': ''}}{{itemData.data.marginbottom == 1 ? ' mb5 ' : ''}}{{itemData.data.boxshadow == 1 ? ' diy-ty ' : ''}}{{itemData.data.marginleft == 1 ? 'lr' : ''}}"
style="{{'background:' + itemData.data.background+';'}}{{'border-radius:' + itemData.data.borderradius+'px;'}}">
<view class="diy-title" style="{{'color:' + itemData.data.color+';'}}">
在线留言
</view> 
<input placeholder="请输入留言标题" type="text" name="liu_yan" maxlength="8" value="{{infoValue}}"></input>
<input placeholder="请输入您的姓名" type="text" name="name" maxlength="4" value="{{infoValue}}"></input>
<input placeholder="请输入电话或手机" type="text" name="phone" maxlength="11" value="{{infoValue}}"></input>
<textarea placeholder="请输入留言（最多可输入200字）" name="area" bindinput="bdmessage" v-model="message" maxlength="200" value="{{infoValue}}"></textarea>
<text>{{message.length}}/200</text>
<button form-type="submit"  style="{{'background:'+itemData.data.btnbackground + ';'}}{{'color:' + itemData.data.btncolor + ';'}}">提交</button>
</view> 
</form> 

JS
const app = getApp(), urlHeader = app.globalData.urlHeader;
Component({
        properties: {
            data: Object
        },

        data: {
            message:'',
            itemData: {}
        },

        ready: function () {
            this.setData({
                itemData: this.properties.data
            })
        },
        methods:{
            //绑定area输入事件（实时监听 留言板内容的字数 ）
            bdmessage: function(e){
                this.setData({
                    message: e.detail.value
                })
            },
    formSubmit: function (e) { 
             
             var liu_yan = e.detail.value.liu_yan;
             var nickName =  e.detail.value.name;
             var dianhua = e.detail.value.phone;
             var area = e.detail.value.area;
             if (liu_yan == '') {
                qq.showToast({
                    title: '留言标题不能为空',
                    icon: "none"
                })
                return;
            }else if (nickName == '') {
                qq.showToast({
                    title: '姓名不能为空',
                    icon: "none"
                })
                return;
            }else if (dianhua == '') {
                qq.showToast({
                    title: '电话或手机号不能为空',
                    icon: "none"
                })
                return;
            }else if (area == '') {
                qq.showToast({
                    title: '留言内容不能为空',
                    icon: "none"
                })
                return;
            }
            
            qq.showToast({
                title: '提交中',
                icon: 'loading',
                duration: 2000
            })
     
        this.setData({
             value: e.detail.value
        })
        qq.request({
            url: '',
            methods: "post",
            data: {
                type: 'qq',
                appid: app.globalData.appid,
                openid: app.globalData.oppenid,
                pid:0,
                model:'liuyan',
                title: e.detail.value.title,
                name: e.detail.value.name,
                phone: e.detail.value.phone,
                message: e.detail.value.area,
                source:'qq'
            },
            success: (res) => {
                qq.showToast({
                    title: '提交成功',
                    icon: 'success',
                    duration: 2000
                })
                this.setData({
                    infoValue:'' //提交完成时，留言板内容为空
                })
            }
        })
    }


}

})

另外链接：https://www.jb51.net/article/144067.htm