校验

src/pages/brand/addBrand/index.vue

@@ -2,8 +2,8 @@
     <div class="wrapper">
         <div class="left">
             <div class="title">资质申请</div>
-            <el-form size="small" class="form" ref="form" :model="form" label-width="140px">
-                <el-form-item label="认证审核类型:">
+            <el-form size="small" class="form" ref="form" :model="form" label-width="140px" :rules="rules">
+                <el-form-item label="认证审核类型:" prop="brand_audit_type">
                     <el-select v-model="form.brand_audit_type" placeholder="请选择" :disabled="isdisable" clearable
                         filterable>
                         <el-option label="国内品牌申请-R标" value="1"></el-option>
@@ -12,11 +12,11 @@
                         <el-option label="海外品牌申请-TM标" value="4"></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="商标分类:" label-width="100px">
+                <el-form-item label="商标分类:" label-width="100px" prop="trademark_type">
                     <el-input placeholder="请输入" v-model="form.trademark_type" maxlength="25">
                     </el-input>
                 </el-form-item>
-                <el-form-item label="选择品牌经营类型:">
+                <el-form-item label="选择品牌经营类型:" prop="brand_management_type">
                     <el-select v-model="form.brand_management_type" placeholder="请选择" :disabled="isdisable" clearable
                         filterable>
                         <el-option label="自有品牌" value="1"></el-option>
@@ -24,14 +24,14 @@
                         <el-option label="无品牌" value="3"></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="商品产地是否进口:" label-width="140px">
+                <el-form-item label="商品产地是否进口:" label-width="140px" prop="commodity_origin_type">
                     <el-select v-model="form.commodity_origin_type" placeholder="请选择" :disabled="isdisable" clearable
                         filterable>
                         <el-option label="是" value="1"></el-option>
                         <el-option label="否" value="2"></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="商标/品牌词:">
+                <el-form-item label="商标/品牌词:" prop="trademark_registrant">
                     <el-input placeholder="请输入" v-model="form.trademark_registrant" maxlength="25">
                     </el-input>
                 </el-form-item>
@@ -39,7 +39,7 @@
                     <el-input placeholder="请输入" v-model="form.trademark_applicant" maxlength="25">
                     </el-input>
                 </el-form-item> -->
-                <el-form-item label="商标注册号/申请号:">
+                <el-form-item label="商标注册号/申请号:" prop="trademark_registrant_nu">
                     <el-input placeholder="请输入" v-model="form.trademark_registrant_nu" maxlength="25">
                     </el-input>
                 </el-form-item>
@@ -55,7 +55,7 @@
                     <el-date-picker v-model="form.trademark_application_time" type="date" placeholder="选择日期">
                     </el-date-picker>
                 </el-form-item>
-                <el-form-item class="single" label="营业执照或组织机构代码证:">
+                <el-form-item class="single" label="营业执照或组织机构代码证:" required>
                     <upload v-if="updatePic" :file="org_code_certificateList" limitNum="10"></upload>
                 </el-form-item>
                 <el-form-item class="single" label="销售授权书（如商持人为自然人，还需提供:">
@@ -129,95 +129,112 @@
                     trademark_application_time: '',
                     remark: ''
                 },
-                loading: false
+                loading: false,
+                rules: {
+                    brand_audit_type: [{
+                        required: true,
+                        message: '请输入必填项',
+                        trigger: 'blur'
+                    }],
+                    trademark_type: [{
+                        required: true,
+                        message: '请选择必填项',
+                        trigger: 'blur'
+                    }],
+                    brand_management_type: [{
+                        required: true,
+                        message: '请选择必填项',
+                        trigger: 'blur'
+                    }],
+                    commodity_origin_type: [{
+                        required: true,
+                        message: '请选择必填项',
+                        trigger: 'blur'
+                    }],
+                    trademark_registrant: [{
+                        required: true,
+                        message: '请选择必填项',
+                        trigger: 'blur'
+                    }],
+                    trademark_registrant_nu: [{
+                        required: true,
+                        message: '请输入必填项',
+                        trigger: 'blur'
+                    }],
+                },
             };
         },
         watch: {},
         computed: {},
         methods: {
             commit() {
-                if (this.org_code_certificateList.length == 0) {
-                    this.$message.error('请选择营业执照或组织机构代码证');
-                    return
-                }
-                if (this.authorizationList.length == 0) {
-                    this.$message.error('请选择销售授权书');
-                    return
-                }
-                if (this.registration_certificateList.length == 0) {
-                    this.$message.error('请选择商标注册证书');
-                    return
-                }
-                if (this.change_certificateList.length == 0) {
-                    this.$message.error('请选择商标变更证明');
-                    return
-                }
-                if (this.registration_applicationList.length == 0) {
-                    this.$message.error('请选择商标注册申请受理通知书');
-                    return
-                }
-                if (this.goods_formList.length == 0) {
-                    this.$message.error('请选择中华人民共和国海关进口货物报关单');
-                    return
-                }
-                let imgDtoList = []
-                this.org_code_certificateList.forEach(element => {
-                    imgDtoList.push({
-                        type: "org_code_certificate",
-                        url: element.url
-                    })
-                });
-                this.authorizationList.forEach(element => {
-                    imgDtoList.push({
-                        type: "authorization",
-                        url: element.url
-                    })
-                });
-                this.registration_certificateList.forEach(element => {
-                    imgDtoList.push({
-                        type: "registration_certificate",
-                        url: element.url
-                    })
-                });
-                this.change_certificateList.forEach(element => {
-                    imgDtoList.push({
-                        type: "change_certificate",
-                        url: element.url
-                    })
-                });
-                this.registration_applicationList.forEach(element => {
-                    imgDtoList.push({
-                        type: "registration_application",
-                        url: element.url
-                    })
-                });
-                this.goods_formList.forEach(element => {
-                    imgDtoList.push({
-                        type: "goods_form",
-                        url: element.url
-                    })
-                });
-                let params = {
-                    brand_audit_type: this.form.brand_audit_type,
-                    brand_management_type: this.form.brand_management_type,
-                    commodity_origin_type: this.form.commodity_origin_type,
-                    imgDtoList: imgDtoList,
-                    remark: this.form.remark,
-                    trademark_applicant: this.form.trademark_applicant,
-                    trademark_application_time: this.form.trademark_application_time,
-                    trademark_authorization_period: this.form.trademark_authorization_period,
-                    trademark_registrant: this.form.trademark_registrant,
-                    trademark_registrant_nu: this.form.trademark_registrant_nu,
-                    trademark_type: this.form.trademark_type
-                }
-                this.loading = true
-                add(params).then(() => {
-                    this.$message.success('申请成功');
-                    store.commit('REMOVETAB', '品牌申请')
-                    this.$router.go(-1)
-                }).catch(() => {
-                    this.loading = false
-                });
+                this.$refs.form.validate(valid => {
+                    if (valid) {
+                        if (this.org_code_certificateList.length == 0) {
+                            this.$message.error('请选择营业执照或组织机构代码证');
+                            return
+                        }
+                        let imgDtoList = []
+                        this.org_code_certificateList.forEach(element => {
+                            imgDtoList.push({
+                                type: "org_code_certificate",
+                                url: element.url
+                            })
+                        });
+                        this.authorizationList.forEach(element => {
+                            imgDtoList.push({
+                                type: "authorization",
+                                url: element.url
+                            })
+                        });
+                        this.registration_certificateList.forEach(element => {
+                            imgDtoList.push({
+                                type: "registration_certificate",
+                                url: element.url
+                            })
+                        });
+                        this.change_certificateList.forEach(element => {
+                            imgDtoList.push({
+                                type: "change_certificate",
+                                url: element.url
+                            })
+                        });
+                        this.registration_applicationList.forEach(element => {
+                            imgDtoList.push({
+                                type: "registration_application",
+                                url: element.url
+                            })
+                        });
+                        this.goods_formList.forEach(element => {
+                            imgDtoList.push({
+                                type: "goods_form",
+                                url: element.url
+                            })
+                        });
+                        let params = {
+                            brand_audit_type: this.form.brand_audit_type,
+                            brand_management_type: this.form.brand_management_type,
+                            commodity_origin_type: this.form.commodity_origin_type,
+                            imgDtoList: imgDtoList,
+                            remark: this.form.remark,
+                            trademark_applicant: this.form.trademark_applicant,
+                            trademark_application_time: this.form.trademark_application_time,
+                            trademark_authorization_period: this.form.trademark_authorization_period,
+                            trademark_registrant: this.form.trademark_registrant,
+                            trademark_registrant_nu: this.form.trademark_registrant_nu,
+                            trademark_type: this.form.trademark_type
+                        }
+                        this.loading = true
+                        add(params).then(() => {
+                            this.$message.success('申请成功');
+                            store.commit('REMOVETAB', '品牌申请')
+                            this.$router.go(-1)
+                        }).catch(() => {
+                            this.loading = false
+                        });
+
+                    }
+                })
             },
             initPage() {
                 this.loading = false
@@ -236,12 +253,12 @@
                     }
                     this.org_code_certificateList = []
                     this.authorizationList = [],
-                    this.registration_certificateList = [],
-                    this.change_certificateList = [],
-                    this.registration_applicationList = [],
-                    this.goods_formList = [],
-                    //刷新子组件
-                    this.updatePic = false
+                        this.registration_certificateList = [],
+                        this.change_certificateList = [],
+                        this.registration_applicationList = [],
+                        this.goods_formList = [],
+                        //刷新子组件
+                        this.updatePic = false
                     this.$nextTick(() => {
                         this.updatePic = true
                     })

src/pages/goods/addGoods/index.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="wrapper">
         <div class="title">新增商品</div>
-        <el-form class="form" ref="form" :model="form" label-width="80px">
-            <el-form-item class="single" label="商品名:" label-width="100px">
+        <el-form class="form" ref="form" :model="form" label-width="80px" :rules="rules">
+            <el-form-item class="single" label="商品名:" label-width="100px" prop="title">
                 <el-input class="pr-50" placeholder="请输入" v-model="form.title" maxlength="60" :disabled="isdisable"
                     show-word-limit>
                 </el-input>
             </el-form-item>
-            <el-form-item label="类目:" label-width="100px">
+            <el-form-item label="类目:" label-width="100px" prop="third_cat_id">
                 <el-select v-model="form.third_cat_id" placeholder="请选择" :disabled="isdisable" clearable filterable>
                     <el-option v-for="item in categoryList" :key="item.level3" :label="item.level3_name"
                         :value="item.level3">
@@ -15,33 +15,33 @@
                     <el-option label="无需审核类目" value="-1"></el-option>
                 </el-select>
             </el-form-item>
-            <el-form-item label="商品ID:" label-width="100px">
-                <el-input placeholder="请输入" :disabled="isdisable" v-model="form.out_product_id" maxlength="25">
+            <el-form-item label="商品ID:" label-width="100px" prop="out_product_id">
+                <el-input placeholder="请输入" :disabled="isdisable" type='number' v-model="form.out_product_id" maxlength="25">
                 </el-input>
             </el-form-item>
-            <el-form-item label="品牌:" label-width="100px">
+            <el-form-item label="品牌:" label-width="100px" prop="brand_id">
                 <el-select v-model="form.brand_id" :disabled="isdisable" placeholder="请选择" clearable filterable>
                     <el-option v-for="item in brandList" :key="item.brand_info_id" :label="item.trademark_registrant"
                         :value="item.brand_info_id">
-                        </el-option>
+                    </el-option>
                     <el-option label="无品牌" value="-1"></el-option>
                 </el-select>
             </el-form-item>
-            <el-form-item label="商品库存:" label-width="100px">
+            <el-form-item label="商品库存:" label-width="100px" prop="stock_num">
                 <el-input placeholder="请输入" :disabled="isdisable" type='number' maxlength="25" v-model="form.stock_num">
                 </el-input>
             </el-form-item>
-            <el-form-item label="售卖价格:" label-width="100px">
+            <el-form-item label="售卖价格:" label-width="100px" prop="sale_price">
                 <el-input placeholder="请输入" :disabled="isdisable" type='number' maxlength="25"
                     v-model="form.sale_price">
                 </el-input>
             </el-form-item>
-            <el-form-item label="市场价格:" label-width="100px">
+            <el-form-item label="市场价格:" label-width="100px" prop="market_price">
                 <el-input placeholder="请输入" :disabled="isdisable" type='number' maxlength="25"
                     v-model="form.market_price">
                 </el-input>
             </el-form-item>
-            <el-form-item class="single" label="小程序链接:" label-width="100px">
+            <el-form-item class="single" label="小程序链接:" label-width="100px" prop="path">
                 <el-input class="pr-50" :disabled="isdisable" placeholder="请输入" v-model="form.path" maxlength="100">
                 </el-input>
             </el-form-item>
@@ -53,11 +53,12 @@
                 <el-input placeholder="请输入" :disabled="isdisable" maxlength="25">
                 </el-input>
             </el-form-item>
-            <el-form-item label="三级类目:" v-if="form.third_cat_id=='-1'" label-width="100px">
-                <el-input placeholder="请输入" :disabled="isdisable" maxlength="25" v-model="form.third">
+            <el-form-item label="三级类目:" v-if="form.third_cat_id=='-1'" label-width="100px"
+                :rules="[{ required: form.third_cat_id=='-1', message: '请输入必填项', trigger: 'blur' }]">
+                <el-input placeholder="请输入" :disabled="isdisable" type='number' maxlength="25" v-model="form.third">
                 </el-input>
             </el-form-item>
-            <el-form-item class="single" label="商品图片:" label-width="100px">
+            <el-form-item class="single" label="商品图片:" label-width="100px" required>
                 <upload v-if="updatePic" :disabled="isdisable" ref="upload_goods" :file="goodsList" limitNum="1">
                 </upload>
             </el-form-item>
@@ -78,6 +79,10 @@
     import store from '@/store/index'
     import upload from '@/components/upload'
     import {
+        validnumber,
+        validPrice
+    } from '@/utils/validate'
+    import {
         add,
         editDetail,
         edit,
@@ -98,7 +103,7 @@
         data() {
             return {
                 categoryList: [],
-                brandList:[],
+                brandList: [],
                 goodsList: [],
                 goodszizhiList: [],
                 outProductId: 0,
@@ -116,56 +121,104 @@
                     path: '',
                     third_cat_id: '',
                     third: '',
-                    brand_id:'',
+                    brand_id: '',
+                },
+                loading: false,
+                rules: {
+                    title: [{
+                        required: true,
+                        message: '请输入必填项',
+                        trigger: 'blur'
+                    }],
+                    third_cat_id: [{
+                        required: true,
+                        message: '请选择必填项',
+                        trigger: 'blur'
+                    }],
+                    out_product_id: [{
+                        required: true,
+                        validator: validnumber,
+                        trigger: 'blur'
+                    }],
+                    brand_id: [{
+                        required: true,
+                        message: '请选择必填项',
+                        trigger: 'blur'
+                    }],
+                    stock_num: [{
+                        required: true,
+                        validator: validnumber,
+                        trigger: 'blur'
+                    }],
+                    sale_price: [{
+                        required: true,
+                        validator: validPrice,
+                        trigger: 'blur'
+                    }],
+                    market_price: [{
+                        required: true,
+                        validator: validPrice,
+                        trigger: 'blur'
+                    }],
+                    path: [{
+                        required: true,
+                        message: '请输入必填项',
+                        trigger: 'blur'
+                    }],
                 },
-                loading: false
             };
         },
         watch: {},
         computed: {},
         methods: {
             commit() {
-                if (this.goodsList.length == 0) {
-                    this.$message.error('请选择至少一张商品图片');
-                    return
-                }
-                let zizhiarray = []
-                this.goodszizhiList.forEach(element => {
-                    zizhiarray.push(element.url)
-                });
-                let params = {
-                    brand_id: this.form.brand_id==-1?2100000000:this.form.brand_id,
-                    has_brand: this.form.brand_id==-1?0:1,
-                    market_price: this.form.market_price,
-                    out_product_id: this.form.out_product_id,
-                    path: this.form.path,
-                    qualificationImgs: zizhiarray.join(","),
-                    sale_price: this.form.sale_price,
-                    stock_num: this.form.stock_num,
-                    third_cat_audit: this.form.third_cat_id == -1 ? 0 : 1,
-                    third_cat_id: this.form.third_cat_id == -1 ? this.form.third : this.form.third_cat_id,
-                    thumb_img: this.goodsList[0].url,
-                    title: this.form.title
-                }
-                this.loading = true
-                if (this.outProductId == 0) { //新增
-                    add(params).then(() => {
-                        this.$message.success('添加成功');
-                        store.commit('REMOVETAB', '新增商品')
-                        this.$router.go(-1)
-                    }).catch(() => {
-                        this.loading = false
-                    });
-                } else { //修改
-                    params.commodity_id = this.commodity_id
-                    edit(params).then(() => {
-                        this.$message.success('修改成功');
-                        store.commit('REMOVETAB', '新增商品')
-                        this.$router.go(-1)
-                    }).catch(() => {
-                        this.loading = false
-                    });
-                }
+                this.$refs.form.validate(valid => {
+                    if (valid) {
+                        if (this.goodsList.length == 0) {
+                            this.$message.error('请选择至少一张商品图片');
+                            return
+                        }
+                        let zizhiarray = []
+                        this.goodszizhiList.forEach(element => {
+                            zizhiarray.push(element.url)
+                        });
+                        let params = {
+                            brand_id: this.form.brand_id == -1 ? 2100000000 : this.form.brand_id,
+                            has_brand: this.form.brand_id == -1 ? 0 : 1,
+                            market_price: this.form.market_price,
+                            out_product_id: this.form.out_product_id,
+                            path: this.form.path,
+                            qualificationImgs: zizhiarray.join(","),
+                            sale_price: this.form.sale_price,
+                            stock_num: this.form.stock_num,
+                            third_cat_audit: this.form.third_cat_id == -1 ? 0 : 1,
+                            third_cat_id: this.form.third_cat_id == -1 ? this.form.third : this.form
+                                .third_cat_id,
+                            thumb_img: this.goodsList[0].url,
+                            title: this.form.title
+                        }
+                        this.loading = true
+                        if (this.outProductId == 0) { //新增
+                            add(params).then(() => {
+                                this.$message.success('添加成功');
+                                store.commit('REMOVETAB', '新增商品')
+                                this.$router.go(-1)
+                            }).catch(() => {
+                                this.loading = false
+                            });
+                        } else { //修改
+                            params.commodity_id = this.commodity_id
+                            edit(params).then(() => {
+                                this.$message.success('修改成功');
+                                store.commit('REMOVETAB', '新增商品')
+                                this.$router.go(-1)
+                            }).catch(() => {
+                                this.loading = false
+                            });
+                        }
+
+                    }
+                })
 
             },
             getDetail() {
@@ -208,9 +261,9 @@
                     this.categoryList = res.data
                 })
             },
-            getBrandList(){ //获取品牌列表
-                getBrandList().then(res=>{
-                    this.brandList=res.data
+            getBrandList() { //获取品牌列表
+                getBrandList().then(res => {
+                    this.brandList = res.data
                 })
             },
             initPage() {
@@ -236,7 +289,7 @@
                         path: '',
                         third_cat_id: '',
                         third: '',
-                        brand_id:'',
+                        brand_id: '',
                     }
                     this.goodsList = []
                     this.goodszizhiList = []

src/pages/qualification/addCategory/index.vue

@@ -1,27 +1,27 @@
 <template>
     <div class="wrapper">
         <div class="title">资质申请</div>
-        <el-form class="form" ref="form" :model="form" label-width="200px">
-            <el-form-item label="一级类目:">
-                <el-input placeholder="请输入" v-model="form.level1" maxlength="25">
+        <el-form class="form" ref="form" :model="form" label-width="200px" :rules="rules">
+            <el-form-item label="一级类目:" prop="level1">
+                <el-input placeholder="请输入" type='number' v-model="form.level1" maxlength="25">
                 </el-input>
             </el-form-item>
-            <el-form-item label="二级类目:" label-width="100px">
-                <el-input placeholder="请输入" v-model="form.level2" maxlength="25">
+            <el-form-item label="二级类目:" label-width="100px" prop="level2">
+                <el-input placeholder="请输入" type='number' v-model="form.level2" maxlength="25">
                 </el-input>
             </el-form-item>
-            <el-form-item label="三级类目:">
-                <el-input placeholder="请输入" v-model="form.level3" maxlength="25">
+            <el-form-item label="三级类目:" prop="level3">
+                <el-input placeholder="请输入" type='number' v-model="form.level3" maxlength="25">
                 </el-input>
             </el-form-item>
-            <el-form-item label="三级类目名称:" label-width="100px">
+            <el-form-item label="三级类目名称:" label-width="120px" prop="level3_name">
                 <el-input placeholder="请输入" v-model="form.level3_name" maxlength="25">
                 </el-input>
             </el-form-item>
-            <el-form-item class="single" label="营业执照或组织机构代码证:">
+            <el-form-item class="single" label="营业执照或组织机构代码证:" required>
                 <upload v-if="updatePic" ref="upload_goods" :file="licenseImgs" limitNum="10"></upload>
             </el-form-item>
-            <el-form-item class="single" label="资质材料URL:">
+            <el-form-item class="single" label="资质材料URL:" required>
                 <upload v-if="updatePic" ref="upload_zizhi" :file="certificateImgs" limitNum="10"></upload>
             </el-form-item>
             <el-form-item class="single" label="备注:">
@@ -41,6 +41,9 @@
     import store from '@/store/index'
     import upload from '@/components/upload'
     import {
+        validnumber,
+    } from '@/utils/validate'
+    import {
         add,
     } from "@/api/category";
     export default {
@@ -63,46 +66,72 @@
                     level3_name: '',
                     remark: ''
                 },
-                loading: false
+                loading: false,
+                rules: {
+                    level1: [{
+                        required: true,
+                        validator: validnumber,
+                        trigger: 'blur'
+                    }],
+                    level2: [{
+                        required: true,
+                        validator: validnumber,
+                        trigger: 'blur'
+                    }],
+                    level3: [{
+                        required: true,
+                        validator: validnumber,
+                        trigger: 'blur'
+                    }],
+                    level3_name: [{
+                        required: true,
+                        message: '请输入必填项',
+                        trigger: 'blur'
+                    }]
+                }
             };
         },
         watch: {},
         computed: {},
         methods: {
             commit() {
-                if (this.licenseImgs.length == 0) {
-                    this.$message.error('请选择营业执照或组织机构代码证');
-                    return
-                }
-                if (this.certificateImgs.length == 0) {
-                    this.$message.error('请选择资质材料');
-                    return
-                }
-                let licenseImgs_temp = []
-                this.licenseImgs.forEach(element => {
-                    licenseImgs_temp.push(element.url)
-                });
-                let certificateImgs_temp = []
-                this.certificateImgs.forEach(element => {
-                    certificateImgs_temp.push(element.url)
-                });
-                let params = {
-                    certificateImgs: certificateImgs_temp.join(","),
-                    level1: this.form.level1,
-                    level2: this.form.level2,
-                    level3: this.form.level3,
-                    licenseImgs: licenseImgs_temp.join(","),
-                    level3_name: this.form.level3_name,
-                    remark: this.form.remark,
-                }
-                this.loading = true
-                add(params).then(() => {
-                    this.$message.success('添加成功');
-                    store.commit('REMOVETAB', '资质申请')
-                    this.$router.go(-1)
-                }).catch(() => {
-                    this.loading = false
-                });
+                this.$refs.form.validate(valid => {
+                    if (valid) {
+                        if (this.licenseImgs.length == 0) {
+                            this.$message.error('请选择营业执照或组织机构代码证');
+                            return
+                        }
+                        if (this.certificateImgs.length == 0) {
+                            this.$message.error('请选择资质材料');
+                            return
+                        }
+                        let licenseImgs_temp = []
+                        this.licenseImgs.forEach(element => {
+                            licenseImgs_temp.push(element.url)
+                        });
+                        let certificateImgs_temp = []
+                        this.certificateImgs.forEach(element => {
+                            certificateImgs_temp.push(element.url)
+                        });
+                        let params = {
+                            certificateImgs: certificateImgs_temp.join(","),
+                            level1: this.form.level1,
+                            level2: this.form.level2,
+                            level3: this.form.level3,
+                            licenseImgs: licenseImgs_temp.join(","),
+                            level3_name: this.form.level3_name,
+                            remark: this.form.remark,
+                        }
+                        this.loading = true
+                        add(params).then(() => {
+                            this.$message.success('添加成功');
+                            store.commit('REMOVETAB', '资质申请')
+                            this.$router.go(-1)
+                        }).catch(() => {
+                            this.loading = false
+                        });
+                    }
+                })
             },
             initPage() {
                 this.loading = false
@@ -136,12 +165,14 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+
         .title {
             font-weight: bold;
             width: 100%;
             text-align: left;
             margin-left: 100px;
         }
+
         .form {
             margin-top: 20px;
             width: 90%;

src/utils/validate.js

@@ -0,0 +1,250 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**str
+ * @returns {Boolean}
+ * @param {string}
+ */
+export function validUsername(str) {
+  const valid_map = ['admin', 'editor']
+  return valid_map.indexOf(str.trim()) >= 0
+}
+
+export function validnumber(rule, value, callback) {
+  if (value === '' || value === undefined || value === null) {
+    if(rule.required){
+      callback(new Error('请输入必填项'))
+    }else{
+      callback()
+    }
+  } else {
+    const reg = (/^[+]{0,1}(\d+)$/)
+    if ((!reg.test(value)) && value !== '') {
+      callback(new Error('只能是正整数'))
+    } else {
+      callback()
+    }
+  }
+}
+
+export function validPrice(rule, value, callback) {
+  if (value === '' || value === undefined || value === null) {
+    if(rule.required){
+      callback(new Error('请输入必填项'))
+    }else{
+      callback()
+    }
+  } else {
+    const reg = (/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/)
+    if ((!reg.test(value)) && value !== '') {
+      callback(new Error('请输入正确的价格,支持两位小数'))
+    } else {
+      callback()
+    }
+  }
+}
+
+export function validYear(rule, value, callback) {
+  if (value === '' || value === undefined || value === null) {
+    callback()
+  } else {
+    const reg = (/[0-9]{4}/)
+    if ((!reg.test(value)) && value !== '') {
+      callback(new Error('请输入正确的年份'))
+    } else {
+      callback()
+    }
+  }
+}
+
+export function validEmail(rule, value, callback) {
+  if (value === '' || value === undefined || value === null) {
+    callback()
+  } else {
+    const reg = (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)
+    if ((!reg.test(value)) && value !== '') {
+      callback(new Error('请输入正确的邮箱'))
+    } else {
+      callback()
+    }
+  }
+}
+
+export function validEmails(rule, value, callback) {
+  if (value === '' || value === undefined || value === null) {
+    callback()
+  } else {
+    var ruleItem = value.split(';')
+    for (var i in ruleItem) {
+      const reg = (/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)
+      if ((!reg.test(ruleItem[i])) && ruleItem[i] !== '') {
+        callback(new Error(ruleItem[i] + '格式错误，请输入正确的邮箱，多个邮箱时用";"分隔'))
+      }
+    }
+    callback()
+  }
+}
+
+export function validNumberAndWord(rule, value, callback) {
+  if (value === '' || value === undefined || value === null) {
+    callback()
+  } else {
+    const reg = (/^([a-zA-Z0-9_\.\-])+$/)
+    if ((!reg.test(value)) && value !== '') {
+      callback(new Error('只能为数字和字母'))
+    } else {
+      callback()
+    }
+  }
+}
+
+export function checkMaxVal(rule, value, callback) {
+  if (value < 0 || value > 100000000) {
+    callback(new Error('请输入[0,100000000]之间的数字'))
+  } else {
+    callback()
+  }
+}
+
+export function checkMaxIntVal(rule, value, callback) {
+  if (value < 0 || value > 2147483647) {
+    callback(new Error('请输入[0,2147483647]之间的数字'))
+  } else {
+    callback()
+  }
+}
+
+export function validator(rule, value, callback) {
+  if (!(/^1[3456789]\d{9}$/.test(value)) && value) {
+    callback(new Error('请输入正确的手机号码!'))
+  }else{
+    callback()
+  }
+}
+
+export function validatorTel(rule, value, callback) {
+  if(!value){
+    callback()
+  }else{
+    if (!(/^1[3456789]\d{9}$/.test(value))) {
+      callback(new Error('请输入正确的手机号!'))
+    }else{
+      callback()
+    }
+  }
+}
+
+export function IdentityCodeValid(rule, value, callback) {
+// 该方法由佚名网友提供;
+  if(value.length === 0){
+    callback()
+  }
+  if (value.length === 15) {
+    if (isValidityBrithBy15IdCard(value)) {
+      callback()
+    } else {
+      callback(new Error('请输入有效的身份证'))
+    }
+  } else if (value.length === 18) {
+    var a_idCard = value.split('')// 得到身份证数组
+    if (isValidityBrithBy18IdCard(value) && isTrueValidateCodeBy18IdCard(a_idCard)) {
+      callback()
+    } else {
+      callback(new Error('请输入有效的身份证'))
+    }
+
+  } else {
+    callback(new Error('请输入有效的身份证'))
+  }
+}
+
+ function isTrueValidateCodeBy18IdCard(a_idCard) {
+  var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1]// 加权因子;
+  var ValideCode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2]// 身份证验证位值，10代表X;
+  var sum = 0 // 声明加权求和变量
+  if (a_idCard[17].toLowerCase() == 'x') {
+    a_idCard[17] = 10// 将最后位为x的验证码替换为10方便后续操作
+  }
+  for (var i = 0; i < 17; i++) {
+    sum += Wi[i] * a_idCard[i]// 加权求和
+  }
+  var valCodePosition = sum % 11// 得到验证码所位置
+  if (a_idCard[17] == ValideCode[valCodePosition]) {
+    return true
+  }
+  return false
+}
+
+function isValidityBrithBy18IdCard(idCard18) {
+  var year = idCard18.substring(6, 10)
+  var month = idCard18.substring(10, 12)
+  var day = idCard18.substring(12, 14)
+  var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day))
+  // 这里用getFullYear()获取年份，避免千年虫问题
+  if (temp_date.getFullYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) {
+    return false
+  }
+  return true
+}
+
+function isValidityBrithBy15IdCard(idCard15) {
+  var year = idCard15.substring(6, 8)
+  var month = idCard15.substring(8, 10)
+  var day = idCard15.substring(10, 12)
+  var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day))
+  // 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法
+  if (temp_date.getYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) {
+    return false
+  }
+  return true
+}
+
+export function isblank(rule, value, callback) {
+  if (value && value.replace(/\s+/g,"") === '') {
+    callback(new Error('不能为空'))
+  }else{
+    callback()
+  }
+}
+
+/**
+ * 是否存在空格
+ * @param rule
+ * @param value
+ * @param callback
+ */
+export function isHasblank(rule, value, callback) {
+  if (value && value.indexOf(' ') >0) {
+    callback(new Error('不能有空格'))
+  }else{
+    callback()
+  }
+}
+
+//验证是否1-99之间
+export function isOneToNinetyNine(rule, value, callback) {
+    if (!value) {
+        return callback(new Error('输入不可以为空'));
+    }
+    setTimeout(() => {
+        if (!Number(value)) {
+            callback(new Error('请输入正整数'));
+        } else {
+            const re = /^[1-9][0-9]{0,1}$/;
+            const rsCheck = re.test(value);
+            if (!rsCheck) {
+                callback(new Error('请输入正整数，值为【1,99】'));
+            } else {
+                callback();
+            }
+        }
+    }, 0);
+}