小程序之注册页面和下拉菜单

一：下拉菜单 van组件

##二 点击注册进行非空判断

使用Vant Weapp组件进行开发

在json中引入

              "van-cell": "@vant/weapp/cell/index",
              "van-cell-group": "@vant/weapp/cell-group/index",
              "van-field": "@vant/weapp/field/index"
              

              使用错误提示组件可以提高用户输入友好度
              <van-cell-group> 
                  <van-field value="{{ username }}" 
                  label="用户名" placeholder="请输入用户名" error-message="{{username}}" />
                  <van-field value="{{ email }}" 
                  label="手机号" placeholder="请输入手机号" error-message="{{emailerr}}" /> 
              </van-cell-group>
              
              使用model:value="{{ value }}"可以实现数据双向绑定减少代码量
              
              data: {
              //前四个为用户输入的值
                username:'',
                email:'',
                pwd:'',
                repwd:'',
             //后四个是错误信息里的值
                usernameerr:'',
                emailerr:'',
                pwderr:'',
                repwderr:''
              },
              封装方法减少代码量，传参
               check:function(name,errkey,errstr) {
                  if(!this.data[name].trim()){
                    this.setData({
                      [errkey]:errstr
                    })
                    return false
                  }else{
                    this.setData({
                      [errkey]:''
                    })
                    return true
                  }
              }
              调用方法
              
                let flag1=this.check('username','usernameerr','昵称不能为空')
                let flag2=this.check('email','emailerr','邮箱不能为空')
                let flag3=this.check('pwd','pwderr','密码不能为空')
                let flag4=this.check('repwd','repwderr','确认密码不能为空')
                
                
              判断是否为空，不为空向后台传输数据，返回注册成功或者错误信息
                if(flag1&&flag2&&flag3&&flag4){
                  registerHttp({
                    name:this.data.username,
                    email:this.data.email,
                    password:this.data.pwd,
                    password_confirmation:this.data.repwd
                  })
                  .then(res=>{
                    if(res.status_code==422){
                        解构出res里面的errors里的email(tsi是一个变量)
                        let{email:[tsi]}=res.errors
                        wx.showToast({
                          title: tsi,
                          icon:'error'
                       })
                    }else{
                      wx.showToast({
                        title: '注册成功',
                        icon:'success'
                      })
                }