2020年7月1日

微信校验WxValidate.js插件实用代码片段(原)


核心代码
wxjs
//index.js
//获取应用实例
import WxValidate from ‘../../utils/WxValidate.js’
const app = getApp()
Page({
  data: {
    array: [‘领域’, ‘生物医药’, ‘人工智能’, ‘新能源,新材料与智能制造’,’新一代信息技术’,’文化创意’,’其它’],
    index: 0,
    //表单验证
    form: {
      name: ”,
      zhiwei: ”,
      gongsi:”,
      lingyu:”,
      rongzi:[‘初创期(A轮\天使\种子)’,’成长期(A轮\B轮0)’,’成熟(B轮\D轮)’,’上市(D轮\上市前)’],
      rongzi_i : 0,
      jine:”,
      jine2:”,
      miaosu:”
    }
  },
  //
  bindPickerChange: function(e) {
    console.log(‘picker发送选择改变,携带值为’, e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  rongzi:function(e){
      console.log(e.currentTarget.dataset.index);
      let rongzi_ii = this.data.form.rongzi_i;
      this.setData({
        [rongzi_ii]: e.currentTarget.dataset.index
      })
      console.log(this.data.form.rongzi_i);
  },
  //报错 
showModal(error) {
  wx.showModal({
    content: error.msg,
    showCancel: false,
  })
},
//验证函数
initValidate() {
  const rules = {
    name: {
      required: true,
      minlength:2
    },
    zhiwei:{
      required:true,
      minlength:2
    },
    gongsi:{
      required:true,
      minlength:2
    }
  }
  const messages = {
    name: {
      required: ‘请填写姓名’,
      minlength:’请输入正确的名称’
    },
    zhiwei:{
      required:’请填写职位’,
      minlength:’职位不小于2位’
    },
    gongsi:{
      required:’请填写公司’,
      minlength:’公司不小于2位’
    }
  }
  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: ‘提交成功’
  })
},
  onLoad: function () {
    this.initValidate()//验证规则函数
  },
  getUserInfo: function(e) {
  }
})
wxml
<div class=”layout layout-bg1 pb-100″>
  <image src=”../../assets/imgs/fy25.png”/>
  <!– <div class=”proheader”>
    <div class=”center”>
      <image src=”../../assets/imgs/fy01.png”/>
    </div>
  </div>  –>
  <div class=”seeu-form pt-20″>
    <form id=’contactForm’ bindsubmit=”formSubmit”> 
    <div class=”row clearfix”>
      <div class=”col1 left”>
        <input type=”text” class=”txt” name=”name” id=”” value=”{{form.name}}” placeholder=”姓名” />
      </div>
      <div class=”col1 right”>
        <input type=”text” class=”txt” name=”zhiwei” id=”” value=”{{form.zhiwei}}” placeholder=”职位”/>
      </div>
    </div>
    <div class=”row mt-25″>
      <input type=”text” class=”txt” name=”gongsi” id=”” value=”{{form.gongsi}}” placeholder=”项目或公司名称”/>
    </div>
    <div class=”row mt-25″ id=’field’>
      <picker class=”select” bindchange=”bindPickerChange” value=”{{index}}” range=”{{array}}”>
    <view class=”picker”>
      {{array[index]}}
    </view>
  </picker>
    </div>
    <div class=”row mt-25 field-other”>
      <input type=”text” class=”txt” name=”other” id=”” value=”” placeholder=”如选其他请填写”/>
    </div>
    <div class=”row row-nav mt-25″>

 

      <h4>融资阶段</h4>
      <ul>
        <li class=”{{form.rongzi_i == index ? ‘active’ : ”}}” wx:key=”{{this}}” wx:for=”{{form.rongzi}}” bindtap=”rongzi” data-index=”{{index}}”>
        <input type=”radio” name=”financing” id=”” value=”” /><i>{{item}}</i></li>
      </ul>

 

    </div>
    <div class=”row row-fee  mt-25″>
      <div class=”col1″>
        <input type=”text” class=”txt” name=”money” id=”” value=”” placeholder=”融资金额”/>
        <label>万元</label>
      </div>
      <div class=”col1″>
        <input type=”text” class=”txt” name=”money2″ id=”” value=”” />
        <label>万元</label>
      </div>
    </div>
    <div class=”row describe mt-25″>
      <textarea type=”text” class=”txt” name=”describe” id=”” value=”” placeholder=”项目描述(140字)”></textarea>
    </div>
    <div class=”row row-file  mt-25″>
      <h4>项目展示图*(可传3张)</h4>
      <ul>
        <li>
          <div class=”add img”>

 

            <image src=””/>
            <sup class=”imgclose”></sup>
            <input type=”file” name=”imgfile” id=”” class=”imgfile” value=”” />
          </div>
        </li>
        <li>
          <div class=”add”>
            <image src=””/>
            <sup class=”imgclose”></sup>
            <input type=”file” name=”imgfile” id=”” class=”imgfile” value=”” />
          </div>
        </li>
        <li>
          <div class=”add”>
            <image src=””/>
            <sup class=”imgclose”></sup>
            <input type=”file” name=”imgfile” id=”” class=”imgfile” value=”” />
          </div>
        </li>
      </ul>
    </div>
    <div class=”row row-submit pb-100″>
      <button form-type=”submit” class=”btn” name=”” id=”” value=”” >进入SEE U →</button>
    </div>
    </form>
  </div>
  <div class=”footer”>
    <ul>
      <li><a href=”#”>Hicool</a></li>
      <li><a href=”#”>日程</a></li>
      <li class=”active”><a href=”#”>SEE U</a></li>
      <li><a href=”#”>我的</a></li>
    </ul>
  </div>
</div>

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732