小程序表单验证

安装google插件： json-handle

具体方法：

https://www.cnblogs.com/xifenglou/p/11364426.html

 

image 的mode属性

widthFix 让图片的标签宽高等比例发生变化

 

swiper和image设置

swiper高度设置和图片高度一致

image设置mode="widthFix" width="100%"

 

在小程序里进行表单验证：

地址：https://github.com/skyvow/wx-extend

index.wxml

  

  

    input

    

  

    

    input

    

  

  

    radio

    

      radio1

      radio2

    

  

  

    checkbox

    

      checkbox1

      checkbox2

    

  

  

    Submit

    Reset

  

 

index.js

//logs.js

import WxValidate from '../../utils/WxValidate.js'

Page({

  data: {

    form:{

      user:"",

      pwd:""

    }

  },

  onLoad: function () {

    // this.getuser()

    this.initValidate()//验证规则函数

  },

showModal(error) {

  wx.showModal({

    content: error.msg,

    showCancel: false,

  })},

  initValidate() {

    const rules = {

      user: {

        required: true,

        minlength:2

      },

      pwd:{

        required:true,

        tel:true

      }

    }

    const messages = {

      user: {

        required: '请填写姓名',

        minlength:'请输入正确的名称'

      },

      pwd:{

        required:'请填写手机号',

        tel:'请填写正确的手机号'

      }

    }

    this.WxValidate = new WxValidate(rules, messages)

  },

  formSubmit: function(e) {

    console.log('form发生了submit事件，携带的数据为：', e.detail.value)

    const params = e.detail.value

    //校验表单

    if (!this.WxValidate.checkForm(params)) {

      const error = this.WxValidate.errorList[0]

      this.showModal(error)

      return false

    }

    this.showModal({

      msg: '提交成功'

    })

  }

})

 

时间选择器： 表单提交

 

wxml

          启运日期

          

            

          

        

 

 

js

  bindTimeChange(e){

    this.setData({

      date:e.detail.value

    })

  }

 

 

携带参数跳转：

当前页面的wxml:

 

      

      基本险

    

 

在接受的那个页面的js里

 onLoad: function (options) {

    // this.getuser()

    console.log(options)//获取点击带来的参数

  },