【关于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>