vue ant-design form 验证

深碍√TFBOYSˉ_ 2024-04-18 12:50 89阅读 0赞

> ant-design form 官网的验证比较简单，而且写法看起来很乱，把验证和html给混合到一起了，可读性不强，这里专门做一个例子，展示如何把把验证逻辑和html代码分开，当然在你使用的时候，你可以把验证相关的js直接提取出来放到一个专门的js文件里面去，这样js看起来就没有那么多了，还有就是这里的写法是纯ES5的写法，看起来可能跟官网不太一样，但是区别只是语法，api都是一样的

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link type="text/css" rel="stylesheet" href="./css/antd.min.css"/>
        
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
        <script src="./js/antd.min.js"></script>
        
        <script src="http://momentjs.cn/downloads/moment.min.js"></script>
    </head>
    <body>
    <div id="app">
    
            <a-button type="primary" @click="showModal">
                弹出框
            </a-button>
    
            <a-modal
            :visible="visible"
            title="Create a new collection"
            v-model="visible"
            @cancle="handleCancel"
            @ok="handleSubmit"
            ok-text="确认"
            cancel-text="取消"
            >
                <a-form layout='vertical' :form="form" ref="collectionForm">
                    <a-form-item label='Title'>
                        <a-input v-decorator="['title',{rules: titleRules}]"/>
                    </a-form-item>
                    <a-form-item label='Description'>
                        <a-input type='textarea' v-decorator="['description']"/>
                    </a-form-item>
                </a-form>
            </a-modal>
    </div>
    <script type="application/javascript">
        var requireValidator = { required: true, message: '请输入内容!' };
        var whitespaceValidator = { whitespace: true, message: '内容为空' };
        var minLengthValidator = { required: true, min: 1, message: '最小长度1' };
        var maxLengthValidator = { required: true, min: 1, message: '最大长度3' };
        // 自定义的校验api{validator: func}
        var phoneValidator = { validator: validatePhone };
        var emojiValidator = { validator: validateEmoj };
        function validatePhone(rule, val, callback) {
            if(val) {
                val = val.trim();
                var isMob= /^[\d\-]+$/;
                var phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
                if(!isMob.test(val) && !phoneReg.test(val)){
                    callback('电话/手机格式不对');
                }
            }
            callback();
        };
        function validateEmoj(rule, val, callback) {
            if(val && isEmojiCharacter(val)) {
                callback('输入了表情');
            }
            callback();
        };
    
        function isEmojiCharacter(substring) {
            for ( var i = 0; i < substring.length; i++) {
                var hs = substring.charCodeAt(i);
                if (0xd800 <= hs && hs <= 0xdbff) {
                    if (substring.length > 1) {
                        var ls = substring.charCodeAt(i + 1);
                        var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000;
                        if (0x1d000 <= uc && uc <= 0x1f77f) {
                            return true;
                        }
                    }
                } else if (substring.length > 1) {
                    var ls = substring.charCodeAt(i + 1);
                    if (ls == 0x20e3) {
                        return true;
                    }
                } else {
                    if (0x2100 <= hs && hs <= 0x27ff) {
                        return true;
                    } else if (0x2B05 <= hs && hs <= 0x2b07) {
                        return true;
                    } else if (0x2934 <= hs && hs <= 0x2935) {
                        return true;
                    } else if (0x3297 <= hs && hs <= 0x3299) {
                        return true;
                    } else if (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030
                        || hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b
                        || hs == 0x2b50) {
                        return true;
                    }
                }
            }
        };
    
    new Vue({
        el: '#app',
        data: function() {
            return {
                formLayout: 'horizontal',
                form: this.$form.createForm(this),
                visible: false,
                titleRules:[requireValidator, whitespaceValidator, minLengthValidator, maxLengthValidator, emojiValidator, phoneValidator],
            }
        },
        methods: {
            handleSubmit: function() {
                var _this = this;
    
                var form = this.$refs.collectionForm.form;
                form.validateFields(function(err, values){
                    if (err) {
                        _this.popMessage(false, "验证失败");
                        return;
                    } else {
                        _this.popMessage(true, "提交成功");
                        _this.visible = false
                    }
                });
            },
            handleCancel: function(value) {
                this.visible= false
                console.log("取消提交")
            },
            showModal: function() {
                this.visible= true
            },
            popMessage: function(success, msg) {
                if(success){
                    this.$message.success(msg);
                }else {
                    this.$message.error(msg);
                }
            },
        }
    });
    
    </script>
    </body>
    </html>