zoukankan      html  css  js  c++  java
  • vue view 表单验证正常逻辑

    <template>
        <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
            <FormItem prop="user">
                 <InputNumber :max="100" :min="0" step="1" v-model="formInline.user"></InputNumber>
            </FormItem>
            <FormItem prop="password">
               <InputNumber :max="100" :min="0" step="1" v-model="formInline.password"></InputNumber>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
            </FormItem>
        </Form>
    </template>
    <script>
        export default {
            data () {
               const user = (rule, value, callback) => {
                    if (value == 0) {
                        callback(new Error('用户名不能为空'));
                    } else {
                        callback();
                    }
                };
                const password = (rule, value, callback) => {
                    if (value == 0) {
                        callback(new Error('密码不能为空'));
                    } else {
                        callback();
                    }
                };
                return {
                    formInline: {
                        user: 0,
                        password: 0
                    },
                    ruleInline: {
                        user: [
                            { required: true, validator: user, trigger: 'change' }
                        ],
                        password: [
                            { required: true, validator: password, trigger: 'change' },
                        ]
                    }
                }
            },
            methods: {
                handleSubmit(name) {
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            this.$Message.success('Success!');
                        } else {
                            this.$Message.error('Fail!');
                        }
                    })
                }
            }
        }
    </script>
    <template>
    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
    <FormItem prop="user">
    <InputNumber :max="100" :min="0" step="1" v-model="formInline.user"></InputNumber>
    </FormItem>
    <FormItem prop="password">
    <InputNumber :max="100" :min="0" step="1" v-model="formInline.password"></InputNumber>
    </FormItem>
    <FormItem>
    <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
    </FormItem>
    </Form>
    </template>
    <script>
    export default {
    data () {
    const user = (rule, value, callback) => {
    if (value == 0) {
    callback(new Error('用户名不能为空'));
    } else {
    callback();
    }
    };
    const password = (rule, value, callback) => {
    if (value == 0) {
    callback(new Error('密码不能为空'));
    } else {
    callback();
    }
    };
    return {
    formInline: {
    user: 0,
    password: 0
    },
    ruleInline: {
    user: [
    { required: true, validator: user, trigger: 'change' }
    ],
    password: [
    { required: true, validator: password, trigger: 'change' },
    ]
    }
    }
    },
    methods: {
    handleSubmit(name) {
    this.$refs[name].validate((valid) => {
    if (valid) {
    this.$Message.success('Success!');
    } else {
    this.$Message.error('Fail!');
    }
    })
    }
    }
    }
    </script>
  • 相关阅读:
    68
    56
    Django manager 命令笔记
    Django 执行 manage 命令方式
    Django 连接 Mysql (8.0.16) 失败
    Python django 安装 mysqlclient 失败
    H.264 SODB RBSP EBSP的区别
    FFmpeg—— Bitstream Filters 作用
    MySQL 远程连接问题 (Windows Server)
    MySQL 笔记
  • 原文地址:https://www.cnblogs.com/xkloveme/p/7906612.html
Copyright © 2011-2022 走看看