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>
  • 相关阅读:
    Rose2003执行出现 -2147417848 (80010108)&#39;:Automation 错误
    Xcode 证书生成、设置、应用
    关于数组中加入相同的view的试验
    XCode 项目配置说明
    ios申请真机调试( xcode 5)详细解析
    CAShapeLayer--备用
    手把手教你 iOS通过自己的服务器实现应用分发
    iOS最新上线流程+续费 2015-7-20更新
    iOS8的一些控件的变更
    iOS8上放大缩小的动画
  • 原文地址:https://www.cnblogs.com/xkloveme/p/7906612.html
Copyright © 2011-2022 走看看