【微信小程序】自定义验证规则

最新推荐文章于 2024-07-01 14:14:04 发布

Trbi

最新推荐文章于 2024-07-01 14:14:04 发布

阅读量396

点赞数

文章标签：微信小程序 javascript

本文链接：https://blog.csdn.net/trbi1/article/details/131377949

版权

一.先看效果

验证不通过

验证失败的返回值

验证通过

通过后的返回值

二、直接上代码

wxml

 <form bindsubmit="submitForm">
      <van-cell-group border="{{false}}">
        <van-field
          value="{{ form.qymc }}"
          label="企业名称"
          name="qymc"
          placeholder="请输入企业名称"
        />
        <view class="submitBtn">
          <van-button form-type="submit" custom-style="width: 690rpx;" type="info">确定</van-button>
        </view>
      </van-cell-group>
</form>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    form:{
      qymc: '',
      whatName: '',
      sex: '',
      tel: '',
      type: '',
      plate: '',
      title: '',
      area: '',
      dept: '',
      content: ''
    },
    rules: {
      whatName: [{required: true, message: '请输入姓名'}],
      sex: [{required: true, message: '请选择性别'}],
      tel: [{required: true, message: '请输入手机号'，pattern: /^1[3-9]\d{9}$/}}],
      type: [{required: true, message: '请选择类型'}],
      plate: [{required: true, message: '请选择板块'}],
      title: [{required: true, message: '请输入标题'}],
      area: [{required: true, message: '请选择反应事项所在地'}],
      dept: [{required: true, message: '请输入涉及相关部门'}],
      content: [{required: true, message: '请输入内容'}],
    }
  },
  /**
   * 验证规则
   */
  formRules(rules, form, callback) {
    // 该数组为每一个的验证结果
    const resultArr = []
    for (let key in rules) {
      const value = form[key]
      const rs = rules[key]
      for (let i = 0; i < rs.length; i++) {
        if (rs[i].required && value.length === 0) {
          // wx.showToast({
          //   title: rs[i].message,
          //   icon: 'none'
          // })
          this.setData({
            [key + 'Error']: rs[i].message
          })
          resultArr.push({result: false, message: rs[i].message})
          // returns
        } else if (rs[i].pattern && !(rs[i].pattern.test(value))) {
          this.setData({
            [key + 'Error']: rs[i].message
          })
          resultArr.push({result: false, message: rs[i].message})
        } else {
          this.setData({
            [key + 'Error']: ''
          })
          resultArr.push({result: true, message: ''})
        }
      }
    }
    if(resultArr.every(item => item.result === true)) {
      callback(true, '验证通过')
    } else {
      // 结果为false时，把没通过的信息赛选出来，通过回调函数暴露出去
      const errMessage = []
      resultArr.forEach(item => {
        if(item.result === false) {
          errMessage.push(item.message)
        }
      })
      callback(false, errMessage)
    }
  },  
  submitForm(val) {
    this.formRules(this.data.rules, val.detail.value , (state, err) => {
      console.log(state, err);
    })
  }
})