【關於vue，iview--》Form表單校驗學習】

【關於vue，iview–》Form表單校驗學習】

<!--
 * 版權所有：xxxxxxx技術有限公司
 * 描述：【關於vue，iview--》Form表單校驗學習】
 * 作者：wangjj
 * 版本          開發者            日期              描述
 * 1.0.0.0       wangjj          2019/09/25         新建
 -->
<template>
    <!--Form表單校驗器的學習-->
    <Form :label-width="110" :model="preStoreUtils" :rules="ruleValidate" inline ref="preAddChargeModal">
        <FormItem label="單價:" prop="unitPrice1" style="width:200px">
            <Input placeholder="正常輸入，僅僅只判斷是否爲必填" v-model="preStoreUtils.unitPrice"></Input>
        </FormItem>
        <FormItem label="單價1:" prop="unitPrice1" style="width:200px">
            <Input placeholder="數字不包含0，且保留四位小數" v-model="preStoreUtils.unitPrice1"></Input>
        </FormItem>
        <FormItem label="單價2:" prop="unitPrice2" style="width:200px">
            <Input placeholder="數字包含0" v-model="preStoreUtils.unitPrice2"></Input>
        </FormItem>
        <FormItem label="稅率:" prop="taxRate" style="width:200px">
            <Input placeholder="數字包含0和1" v-model="preStoreUtils.taxRate"></Input>
        </FormItem>
        <FormItem label="稅率1:" prop="taxRate1" style="width:200px">
            <Input placeholder="數字不包含0和1" v-model="preStoreUtils.taxRate1"></Input>
        </FormItem>
    </Form>
</template>

<script>

    export default {
        name: 'test',
        data () {
            /**
             * 所有的校驗方法寫在這裏
             */
            let validatorUnitPrice = function (rule, value, callback) {
                if (value === '' || value === null || value === undefined) {
                    return callback(new Error('請輸入單價！'));
                } else {
                    callback();
                }
            };
            let validatorUnitPrice1 = function (rule, value, callback) {
                if (value === '' || value === null || value === '0.0' || value === '0.00' || value === '0.000' || value === '0.0000') {
                    return callback(new Error('請輸入單價！'));
                } else if (!/(^[1-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{3}$)/.test(value) && value < 0.0001) {
                    return callback(new Error('單價必須大於0,且保留4位小數!'));
                } else {
                    callback();
                }
            };
            let validatorUnitPrice2 = function (rule, value, callback) {
                if (value === '' || value === null || value === undefined) {
                    return callback(new Error('請輸入單價！'));
                } else if (!/(^[1-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{3}$)/.test(value)) {
                    return callback(new Error('單價必須大於0,且保留4位小數!'));
                } else {
                    callback();
                }
            };
            let validatorTaxRate = function (rule, value, callback) {
                if (value === '' || value === null || value === '0.0' || value === '0.00') {
                    callback();
                } else if (!/^(0(\.\d{1,2})?|1(\.0{1,2})?)$/.test(value)) {
                    return callback(new Error('格式不對,請填0--1之間的數字,小數保留2位'));
                } else {
                    callback();
                }
            };
            let validatorTaxRate1 = function (rule, value, callback) {
                if (value == '' || value === null || value !== '0.0' || value !== '0.00') {
                    callback();
                } else if (!/(^0\.[0-9]+$)/.test(value)) {
                    return callback(new Error('扣率在0.00到1.0之間'));
                } else {
                    callback();
                }
            };
            return {
                preAddChargeModal: false,
                //表單參數
                preStoreUtils: {
                    unitPrice: '',//
                    unitPrice1: '',//
                    unitPrice2: '',//
                    taxRate: '',
                    taxRate1: ''
                },
                //校驗器
                ruleValidate: {
                    //單價
                    unitPrice: [
                        {
                            required: true,
                            validator: validatorUnitPrice,
                            trigger: 'blur'
                        }
                    ],
                    //單價1
                    unitPrice1: [
                        {
                            required: true,
                            validator: validatorUnitPrice1,
                            trigger: 'blur'
                        }
                    ],
                    //單價2
                    unitPrice2: [
                        {
                            required: true,
                            validator: validatorUnitPrice2,
                            trigger: 'blur'
                        }
                    ],
                    //稅率
                    taxRate: [
                        {
                            required: true,
                            validator: validatorTaxRate,
                            trigger: 'blur'
                        }
                    ],
                    //稅率1
                    taxRate1: [
                        {
                            required: true,
                            validator: validatorTaxRate1,
                            trigger: 'blur'
                        }
                    ]
                }
            };
        },
        methods: {
            /**
             * 此處爲一個post請求的表單驗證示例   本vue文件並沒有調用它
             */
            add () {
                this.$refs.preAddChargeModal.validate(valid => {
                    if (valid) {
                        /**
                         * 換成自己的請求接口
                         */
                        util.ajax
                            .post(util.orgCode + '此處爲url的鏈接', this.preStoreUtils)
                            .then(res => {
                                if (res.data.code === 0) {
                                    this.$Message.success('添加成功!');
                                    this.clearData();
                                    this.$emit('searchMethods');
                                } else {
                                    this.$Message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$Message.error('表單驗證失敗！');
                    }
                });
            },
            //清空數據
            clearData () {
                //這裏的ref 定義在 from 控件中
                this.$refs.preAddChargeModal.resetFields();
                this.$emit('close');
            }
        },
        mounted () {
        }
    };
</script>

<style scoped>

</style>