微信小程序表单加规则验证_小程序form表单验证-CSDN博客

本文链接：https://blog.csdn.net/weixin_56274002/article/details/143104665

 <form bindsubmit="onSubmit" report-submit="true">
    <view class="form-group">
      <label class="label"> 名称：</label>
      <t-input class="input" name="mc" placeholder="请输入名称" allowInputOverMax='false' maxlength="25" status="error" tips="{{errors.mc}}" value="{{formData.mc}}" data-name="mc" bindchange="onInputChange" />
    </view>
</form>

Page({
  data: {
    formData: {
      mc: ''
    },
    errors: {
      mc: ''
    }
  },


//规则验证
  validateForm() {
    // 联系电话，从业人数，身份证，联系电话
    const { mc} = this.data.formData;
    const errors = { mc};

    // 简单的验证逻辑
    if (!mc) {
      errors.mc = '名称不能为空';
    } else if (!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(mc )) {
      errors.mc = '名称格式不正确';
    }
  
    this.setData({ errors });
    return !errors.mc ; // 返回验证是否通过
  },

  // 规则验证错误信息显示
  onInputChange(e: any) {
    let name = e.currentTarget.dataset.name;
    this.setData({
      [`formData.${name}`]: e.detail.value,
      [`errors.${name}`]: '' // 清空错误信息
    });
  },

  onSubmit() {
    if (validateFields(formData)) {
        console.log('获取成功')
    }
 }