//表单验证
//formData 表单数据，例：{title:'',litpic:''}
//rule 验证规则，例：
//rule: {
// title: [
//     {required:true,msg: '产品标题不能为空'},
//     {min:2,msg: '名称不能小于2个字符'},
//     {max:60,msg: '名称不能大于60个字符'},
//     {reg:'/^\\d{2,3}$/',msg: '只能是输入2-3位数字'},
// ]
//}
//返回 验证通过：{check:true}  验证失败：{check:false,field:'title',msg:'标题不正确'}
function validation(formData,rule){
    return new Promise((resolve, reject)=>{  
        const ruleField = Object.keys(rule);
        var check = true;
        var errorField = {};
        for(var i=0;i<ruleField.length;i++){
            var key = ruleField[i];
            if(key in formData){
                rule[ruleField[i]].some(ruleItem => {
                    //长度验证
                    if(ruleItem.max){
                        if(formData[key].length > ruleItem.max){
                            errorField = {key:key,msg:ruleItem.msg};
                            check = false;
                            return false;
                        }
                    }
                    if(ruleItem.min){
                        if(formData[key].length < ruleItem.min){
                            errorField = {key:key,msg:ruleItem.msg};
                            check = false;
                            return false;
                        }
                    }

                    //验证必填
                    if(ruleItem.required && ruleItem.required == true){
                        if(formData[key].length == 0){
                            errorField = {key:key,msg:ruleItem.msg};
                            check = false;
                            return false;
                        }
                    }

                    //正则验证
                    if(ruleItem.reg){
                        var regex = new RegExp(ruleItem.reg.slice(1, -1)); //字符串转正则
                        if (!regex.test(formData[key])) {
                            errorField = {key:key,msg:ruleItem.msg};
                            check = false;
                            return false;
                        }
                    }
                })
                
                if(!check){
                    break;
                }
            }else{
                wx.showModal({
                    content: '验证失败：'+ruleField[i]+'字段不存在！',
                    showCancel:false,
                })
                reject('验证失败：'+ruleField[i]+'字段不存在！');
            }
        }
        //返回结果
        if(check){
            resolve({check:check});
        }else{
            resolve({check:check,field:errorField.key,msg:errorField.msg});
        }
    });  
}




// 滚动到第一个class = error元素
function scrollToFirstError() {
    const query = wx.createSelectorQuery();
        // 选择所有class包含'error'的view元素  
        query.selectAll('.error').boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec((res) => {
            if (res[0] && res[0].length > 0) {
                // 获取第一个error元素的位置信息  
                const firstErrorRect = res[0][0];
                // 获取页面滚动位置  
                const scrollOffset = res[1].scrollTop;

                // 计算滚动位置（顶部留出100rpx空间）  
                const targetPosition = firstErrorRect.top + scrollOffset - 100;

                // 执行滚动  
                wx.pageScrollTo({
                    scrollTop: targetPosition,
                    duration: 200,
                    success: () => {
                        console.log('已滚动到第一个错误元素');
                    }
                });
            } else {
                console.log('未找到class为error的元素');
            }
    });
}

引用

Page({
    data: {
    
        rule: {
            title: [
                {required:true,msg: '产品标题不能为空'},
                {min:2,msg: '色卡名称不能小于2个字符'},
                {max:60,msg: '色卡名称不能大于60个字符'},
                {reg:'/^\\d{2,3}$/',msg: '只能是数字2-3'},
            ],
         },
         
         title:'',
         
         error: {}, //错误提示
     }
     
     
     //提交前验证
     var check = await util.validation(param,this.data.rule);
     if(!check.check){
            this.setData({
                [`errors.${check.field}`]: check.msg
            })
            util.scrollToFirstError();
            return false;
      }
})

wxml

<view class="ele name">
        <view class="lable">
            <text class="sta">*</text>
            <text class="name">产品标题</text>
            <text class="tip"></text>
        </view>
        <view class="val">
            <input model:value="{{title}}"  bindinput="inputChange" data-field="title" placeholder="请输入"/>
        </view>
        <view class="msg error" wx:if="{{errors.title}}">{{errors.title}}</view>
    </view>