小程序表单验证

安装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

<!--logs.wxml-->

<view class="container ">

  <form bindsubmit="formSubmit" bindreset="formReset">

  <view class="section">

    <view class="section__title">input</view>

    <input name="user" value="{{user}}" placeholder="please input here" />

  </view>

    <view class="section">

    <view class="section__title">input</view>

    <input name="pwd" value="{{pwd}}" placeholder="please input here" />

  </view>

  <view class="section section_gap">

    <view class="section__title">radio</view>

    <radio-group name="radio-group">

      <label><radio value="radio1"/>radio1</label>

      <label><radio value="radio2"/>radio2</label>

    </radio-group>

  </view>

  <view class="section section_gap">

    <view class="section__title">checkbox</view>

    <checkbox-group name="checkbox">

      <label><checkbox value="checkbox1"/>checkbox1</label>

      <label><checkbox value="checkbox2"/>checkbox2</label>

    </checkbox-group>

  </view>

  <view class="btn-area">

    <button formType="submit">Submit</button>

    <button formType="reset">Reset</button>

  </view>

</form>

</view>

 

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

<view class="cart1_content">

          <view class="section__title">启运日期</view>

          <picker mode="date" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">

            <input placeholder-style="text-align:right" disabled name="date" value="{{date}}" placeholder="请选择日期" />

          </picker>

        </view>

 

 

js

  bindTimeChange(e){

    this.setData({

      date:e.detail.value

    })

  }

 

 

携带参数跳转：

当前页面的wxml:

 <navigator url="/pages/insurance/insurance?id=1">

      <image src="../../imgs/car.png"></image>

      <text>基本险</text>

    </navigator>

 

在接受的那个页面的js里

 onLoad: function (options) {

    // this.getuser()

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

  },