篝火
篝火
  • 发布:2022-06-14 08:58
  • 更新:2023-06-12 09:57
  • 阅读:842

怎样验证 uni-data-select 组件的值呢?

分类:uni-app

如题,怎样验证 uni-data-select 组件的值呢? 多谢。

源码如下:

<uni-forms-item class='user-info-input-wrapper' label="所在院校" name="schoolSelect">  
    <uni-data-select class="select-row-wrapper" v-model="schoolID" :localdata="schoolList"  
        :clear="true" placeholder="请选择所在院校" @change="pickSchoolAction"></uni-data-select>  
</uni-forms-item>
schoolSelect: {  

                    rules: [{  
                            required: true,  
                            errorMessage: '请选择所在的院校'  
                        },  
                        {  
                            validateFunction: function(rule, value, data, callback) {  

                                console.log('schoolID =', value);  
                                if (this.schoolID.length < 1) {  
                                    callback('请选择所在的院校---')  
                                    // return false;  
                                }  
                                return true  
                            }  
                        }  
                    ],  
                    label: '所在院校',  
                    validateTrigger: 'submit'  
                },
2022-06-14 08:58 负责人:无 分享
已邀请:
西梁

西梁 - 10年开发老司机,专治疑难杂症

                schoolSelect: {  
                    rules: [  
                        {  
                            required: true,  
                            errorMessage: '请选择所在的院校'  
                        }  
                    ]  
                }

这样就行了啊,写多余代码干嘛

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

给你说个最简单的办法 就是有值以后,,通过 if判断

或者你可以 看看官方的demo示例 比这写

  • 篝火 (作者)

    谢谢回复。

    官方demo中好像没有相关示例。

    自己写的话有点不合适——提示UI不统一;所以还是想优先考虑官方的方式,如果有的话。

    2022-06-14 09:14

篝火

篝火 (作者)

可是,点击提交按钮时,总是不验证这个组件,而其他组件会验证。

——别的地方弄错了?

谢谢回复。

  • 西梁

    代码全部贴出来

    2022-06-14 10:33

篝火

篝火 (作者)

好的,谢谢啊。

西梁

西梁 - 10年开发老司机,专治疑难杂症

要把需要验证的字段放到 forms 的 modelValue 对象里

v-model="baseFormData.schoolID"
  • 篝火 (作者)

    多谢回复。

    这个方向没错,可是 还是不行。

    2022-06-14 14:45

篝火

篝火 (作者)

可能 uni-data-select 等某些 组件不支持 这种方式的校验,也许需要自己来实现吧。

西梁

西梁 - 10年开发老司机,专治疑难杂症

这个组件确实有点问题,需要自己validateFunction,回掉的value在清空值的时候是错误的

<template>  
    <!-- 自定义表单校验 -->  
    <uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">  
        <uni-forms-item label="姓名" required name="name"><uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" /></uni-forms-item>  
        <uni-forms-item label="年龄" required name="age"><uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" /></uni-forms-item>  
        <uni-forms-item label="爱好" required name="range"><uni-data-select v-model="customFormData.range" :localdata="range" /></uni-forms-item>  
    </uni-forms>  
    <button type="primary" @click="submit('customForm')">提交</button>  
</template>  

<script>  
export default {  
    data() {  
        var that = this  
        return {  
            range: [{ value: 1, text: '篮球' }, { value: 2, text: '足球' }, { value: 3, text: '游泳' }],  
            // 自定义表单数据  
            customFormData: {  
                name: '',  
                age: '',  
                range: ''  
            },  
            // 自定义表单校验规则  
            customRules: {  
                name: {  
                    rules: [  
                        {  
                            required: true,  
                            errorMessage: '姓名不能为空'  
                        }  
                    ]  
                },  
                age: {  
                    rules: [  
                        {  
                            required: true,  
                            errorMessage: '年龄不能为空'  
                        }  
                    ]  
                },  
                range: {  
                    rules: [  
                        {  
                            required: true,  
                            errorMessage: '年龄不能为空'  
                        },  
                        {  
                            validateFunction(rule, value, data, callback) {  
                                if (!that.customFormData.range) {  
                                    callback('不能为空')  
                                }  
                            }  
                        }  
                    ]  
                }  
            }  
        }  
    },  
    onReady() {  
        // 设置自定义表单校验规则,必须在节点渲染完毕后执行  
        this.$refs.customForm.setRules(this.customRules)  
    },  
    methods: {  
        submit(ref) {  
            this.$refs[ref]  
                .validate()  
                .then(res => {  
                    console.log('success', res)  
                    uni.showToast({  
                        title: `校验通过`  
                    })  
                })  
                .catch(err => {  
                    console.log('err', err)  
                })  
        }  
    }  
}  
</script>  

<style lang="scss"></style>  
  • 篝火 (作者)

    嗯嗯 非常感谢!

    我先走完流程 再回来好好琢磨一下。

    2022-06-14 16:24

  • 篝火 (作者)

    啊,还是不行 —— 校验规则 没有被执行。

    2022-06-17 13:40

篝火

篝火 (作者)

文档里说它 —— 会自动实现表单校验的 ............

   :-(
x***@126.com

x***@126.com

你好,你解决了吗,我也碰见这个问题了

要回复问题请先登录注册