vue ant-design form 验证

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

信行合一

5573人浏览 · 2019-09-06 19:30:21

信行合一 · 2019-09-06 19:30:21 发布

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"/>
    <!-- vue 版本需要注意，不是每一个版本都起作用的 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="./js/antd.min.js"></script>
    <!-- 引入 moment.min.js -->
    <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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^