输入框+滑动两种输入数值方式，输入验证

最新推荐文章于 2023-04-06 11:15:12 发布

agreenhand0

最新推荐文章于 2023-04-06 11:15:12 发布

阅读量455

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序前端 javascript 正则表达式

本文链接：https://blog.youkuaiyun.com/agreenhand0/article/details/126502193

微信小程序专栏收录该内容

2 篇文章

订阅专栏

此博客介绍如何实现在WXML中，input和text元素同时工作，输入框根据滑动块变化动态调整，同时实现数值验证，确保面积在5到500平方米范围内，超出范围时给出提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input和text同行,同时滑动块根据输入框动态改变，同时验证是否数字，当输入值小于滑动范围时会提示过小(大)。

wxml:

<view wx:if='{{!changeStatus}}' class="view-contain-ti">
  <!-- 设置面积 -->
  <!-- <text class="text-ti">设置民宿面积</text> -->
  <view style="display:flex;align-items:center">
    <text>设置民宿面积(平方米):</text><input class="inputl" bindinput="usernameInput" placeholder="输入5-500的数字" value="{{inputValue}}"/>
  </view>
  <view class="intro">
    <slider bindchange="sliderchange" min="{{minValue}}" max="{{maxValue}}" block-size="20" value="{{areaValue}}" show-value />
  </view>
</view>

js:

 //实时获取数据
    usernameInput: function (e) {
        let value = this.validateNumber(e.detail.value);
        if(value<=500&&value>=5){
            this.setData({
                areaValue: value
            })
        }else if(value<5){
            wx.showToast({
                title: "面积设置过小！", // 提示的内容
                icon: "none", // 图标，默认success
                image: "", // 自定义图标的本地路径，image 的优先级高于 icon
                duration: 700, // 提示的延迟时间，默认1500
                mask: false, // 是否显示透明蒙层，防止触摸穿透
        })
            this.setData({
                areaValue: 5
            })
        }else if(value>500){
            wx.showToast({
                title: "面积设置过大！", // 提示的内容
                icon: "none", // 图标，默认success
                image: "", // 自定义图标的本地路径，image 的优先级高于 icon
                duration: 700, // 提示的延迟时间，默认1500
                mask: false, // 是否显示透明蒙层，防止触摸穿透
        })
            this.setData({
                areaValue: 500
            })
        }else{
            this.setData({
                areaValue: 5,
                inputValue:''
            })
        }

    },
    //数字限制
    validateNumber(val) {
        return val.replace(/\D/g, '')
    },
     /**
     * slider滑动监听事件,滑动选择面积大小
     */
    sliderchange: function (e) {
        this.setData({
            textValue: '设置民宿面积:' + e.detail.value + ' 平方米',
            areaValue: e.detail.value,
            inputValue:e.detail.value
        })
        console.log(`当前值`, this.data.areaValue)
    },