微信小程序使用vant weapp的van-field,输入有内容时,表单校验数据一直为空的问题

在微信小程序中使用了van-field来输入用户的手机号码,并且实现实时校验手机号码的正确性,具体表现如下

主要原因是不支持数据双向绑定:当输入内容发生改变得时候,需要通过bind:change来将数据赋值给phoneNumber;

<van-field model:value="{{ phoneNumber }}" type="number" error-message="{{phoneNumberError}}" center clearable placeholder="请输入手机号码" use-button-slot bind:change="phoneNumberChange" bind:Confirm="bindPhoneNumber">
          <button disabled="{{phoneNumber && !phoneNumberDisabled ? false : true}}" type="primary" slot="button" size="mini" bindtap="bindPhoneNumber">确定</button>
        </van-field>
  phoneNumberChange (e) {
    const self = this;
    const reg = /^[1][3,4,5,7,8][0-9]{9}$/;
    let phoneNumber = seld.data.phoneNumber;
    phoneNumber = e.detail.value;
    self.setData({phoneNumber, phoneNumber}); //需要将数据先赋值给data中的phoneNumber
    let phoneNumberDisabled = self.data.phoneNumberDisabled;
    let phoneNumberError = self.data.phoneNumberError;
    if(!self.data.phoneNumber) {
      phoneNumberDisabled = true;
      phoneNumberError = '手机号码不能为空';
      self.setData({phoneNumberDisabled,phoneNumberError })
      self.setData({phoneNumberError,phoneNumberError })
    }
    else if(!reg.test(self.data.phoneNumber)) {
      phoneNumberDisabled = true;
      phoneNumberError = '手机号码格式不正确';
      self.setData({phoneNumberDisabled,phoneNumberError })
      self.setData({phoneNumberError,phoneNumberError })
    }
    else {
      phoneNumberDisabled = false;
      phoneNumberError = null;
      self.setData({phoneNumberDisabled,phoneNumberError })
      self.setData({phoneNumberError,phoneNumberError })
    }
  },

 

<think>好的,我现在需要帮助用户了解如何在微信小程序使用Vant-UI实现表单的非校验。首先,我需要回顾一下用户提供的引用内容,确保答案准确。 用户引用了三个参考资料,其中提到了Vant表单组件的配置和使用,特别是在表单提交和组件引入方面的内容。引用3中的代码示例展示了如何在wxml中使用van-fieldvan-button,并且表单绑定了submit事件。这些信息是关键,因为非校验通常与表单提交事件相关。 接下来,我需要考虑Vant-UI表单组件本身是否支持非校验。根据常见的UI框架设计,比如Vant表单组件可能会有required属性来标记必填项,但具体的验证机制可能需要结合小程序的原生表单验证或者自定义JavaScript函数来处理。 根据引用3中的代码,van-field有一个required属性,这应该用于显示必填标记。但用户的问题是关于非验证,也就是在提交表单检查这些字段是否已填写。因此,可能需要在小程序的form组件中绑定bindsubmit事件,并在对应的js文件中编写验证逻辑。 此外,van-button的form-type属性需要设置为'submit'才能触发表单提交。在示例代码中,用户可能使用了变量sub,但正确的做法应该是直接设置为'submit',或者通过数据绑定传递。这可能是一个需要注意的地方,避免因为form-type设置错误导致提交不触发。 然后,考虑如何在提交进行非验证。小程序的原生表单可以通过在form的bindsubmit事件中获取表单数据,然后在js中进行判断。例如,在提交处理函数中检查各个字段的值是否为,如果为,则显示错误提示;否则继续提交。 另外,Vantvan-field组件可能有自己的校验规则,或者需要结合小程序的WXS进行实校验。不过根据引用中的信息,用户可能更倾向于在提交进行整体验证,而不是实校验。因此,重点应放在提交的处理函数。 可能还需要使用WXSS来调整错误提示的样式,比如当字段为,显示红色边框或提示文字。但用户的问题主要是功能实现,样式方面可能次要。 总结步骤应该是: 1. 引入Vant组件,正确配置json文件。 2. 在wxml中使用van-field设置required属性,并在form中放置提交按钮。 3. 在js中编写表单提交函数,检查各字段的值是否为。 4. 如果为使用小程序的API(如wx.showToast)提示用户。 5. 否则,处理表单数据,进行提交或其他操作。 需要确保示例代码正确,比如form的bindsubmit是否正确绑定,van-button的form-type是否为'submit',以及js中如何获取表单数据。可能还需要使用this.setData来更新状态,比如禁用按钮直到所有必填项满足条件。 最后,根据用户提供的引用,确保答案中的代码示例与引用中的结构一致,比如使用van-fieldvan-button的配置方式,以及表单的结构。同,可能需要提到如何通过JSON配置表单规则,如引用1中提到的动态表单配置,但用户的问题更关注非校验的具体实现,因此可能不需要深入讨论动态配置,除非相关。</think>### 微信小程序 Vant-UI 表单校验实现步骤 #### 1. 配置 Vant-UI 组件 在 `app.json` 中引入表单组件: ```json { "usingComponents": { "van-field": "@vant/weapp/field/index", "van-button": "@vant/weapp/button/index" } } ``` #### 2. 编写表单结构(WXML) ```html <form bindsubmit="onSubmit"> <!-- 必填项:会员号 --> <van-field name="vipAccount" label="会员号" required clearable placeholder="请输入会员号" value="{{ formData.vipAccount }}" bind:change="onFieldChange" /> <!-- 提交按钮 --> <van-button form-type="submit" type="primary" custom-class="submit-btn" >提交</van-button> </form> ``` #### 3. 实现非校验逻辑(JS) ```javascript Page({ data: { formData: { vipAccount: '' // 初始化字段 } }, // 字段输入监听 onFieldChange(e) { const { field } = e.currentTarget.dataset; this.setData({ [`formData.${field}`]: e.detail }); }, // 提交验证 onSubmit(e) { const { vipAccount } = this.data.formData; // 非校验 if (!vipAccount.trim()) { wx.showToast({ title: '会员号不能为', icon: 'none', duration: 2000 }); return; } // 通过校验后的操作 wx.request({ url: 'your_api_url', method: 'POST', data: e.detail.value, success: () => { wx.showToast({ title: '提交成功' }); } }); } }); ``` #### 关键点说明: 1. **`required`属性**:在 `van-field` 中设置该属性会显示红色星号标记必填项[^3] 2. **数据绑定**:通过 `value="{{ formData.vipAccount }}"` 实现双向数据绑定 3. **提交拦截**:在 `onSubmit` 中先进行手动校验校验失败阻止表单提交 4. **错误提示**:使用 `wx.showToast` 显示校验失败提示 #### 效果增强建议: - 添加实校验:通过 `bind:blur` 监听失焦事件立即校验 - 样式优化:为非法字段添加红色边框提示 - 禁用按钮:在校验未通过禁用提交按钮
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值