新增表单验证格式

src/views/AddTask.vue

@@ -186,7 +186,6 @@ export default class AddTask extends Vue {
     const form = this.$data.addForm;
     this.$refs.ruleForm.validate((valid: any) => {
       if (valid) {
-        // console.log('验证通过了');
         // 提交
         // this.createPermission(form).then((data: any) => {
         //   this.closeDialog();

src/views/FilterNumber.vue

@@ -38,11 +38,10 @@
                   class="demo-ruleForm"
                   >
                   <el-form-item label="用户组名称：" name="dsgroup" :label-width="formLabelWidth" prop='dsgroup'>
-                    <el-input v-model="filterForm.dspgroup"
+                    <el-input v-model="filterForm.dsgroup"
                       style='width:80%; margin-left:10px'
                       placeholder="请输入用户组名称（限20字）"
-                      name='dspgroup'
-                      clearable />
+                      />
                   </el-form-item>
                   <!-- 基础特征 -->
                   <div class="basic-feature">
@@ -53,28 +52,35 @@
                           <el-checkbox v-for="sex in sexes" :label="sex" :key="sex">{{ sex }}</el-checkbox>
                         </el-checkbox-group>
                       </el-form-item>
-                      <el-form-item label="年龄" prop="agelist" style="width:50%" :label-width="formLabelWidth">
-                        <div class="flex">
-                          <div class="flex-item" >
-                            <el-input v-model="addForm.everydayAdd" auto-complete="off" width='30%'>
+
+                      <div class="flex">
+                        <div class="flex-item" >
+                          <el-form-item
+                            label="年龄"
+                            prop="ageStart"
+                            name='ageStart'
+                            :label-width="formLabelWidth">
+                            <el-input v-model="filterForm.ageStart" auto-complete="off" >
                               <template slot='suffix'>
                                 岁
                               </template>
                             </el-input>
-                          </div>
-                          <span style="width:20%;text-align:center"> —— </span>
-                          <div class="flex-item" >
-                            <el-input v-model="addForm.everydayAdd" auto-complete="off" width='30%'>
+                          </el-form-item>
+                        </div>
+                        <span style="width:20%;text-align:center;line-height:35px"> —— </span>
+                        <div class="flex-item" >
+                          <el-form-item style="width:50%" prop="ageEnd" name='ageEnd'>
+                            <el-input v-model="filterForm.ageEnd" auto-complete="off" width='30%'>
                               <template slot='suffix'>
                                 岁
                               </template>
                             </el-input>
-                          </div>
+                          </el-form-item>
                         </div>
-                      </el-form-item>
+                      </div>
                     </div>
                     <div class="flex">
-                      <el-form-item label="省市">
+                      <el-form-item label="省市" prop="province" name='province'>
                         <div class="flex">
                           <ul class="provincelist">
                             <li v-for='(province, ind) in area.provinceOptions' :key="ind" @click='getProvince(ind)'>
@@ -171,8 +177,8 @@
                         </el-form-item>
 
                         <div class="flex" style='width:40%;margin-left:40px;line-height:30px'>
-                          <el-form-item prop="flowStart" >
-                            <el-input v-model='filterForm.flowStart'>
+                          <el-form-item prop="consumptionStart" >
+                            <el-input v-model='filterForm.consumptionStart'>
                               <template slot='suffix'>
                                   元
                               </template>
@@ -181,8 +187,8 @@
                           </el-form-item>
                           <span style="width:35%;text-align:center"> —— </span>
 
-                          <el-form-item prop='flowEnd'>
-                              <el-input v-model='filterForm.flowEnd'>
+                          <el-form-item prop='consumptionEnd'>
+                              <el-input v-model='filterForm.consumptionEnd'>
                                 <template slot='suffix'>
                                   元
                               </template>
@@ -282,8 +288,6 @@ export default class FilterNumber extends Vue {
   @State('filterNumber') public numberFilterState: any;
   @Action(GET_FILTERLIST) public getFilterlist: any;
   @Action(CREATE_FILTERLIST) public createFilter: any;
-  // @Action(UPDATE_PERMISSION) public updatePermission: any;
-  // @Action(DELETE_PERMISSION) public deletePermission: any;
 
   // 初始化数据
   // 表格
@@ -444,7 +448,8 @@ export default class FilterNumber extends Vue {
 
   public filterForm = {
     dsgroup: '',
-    agerange: [10, 80],
+    ageStart: '',
+    ageEnd: '',
     sexlist: [],
     flow: [],
     flowStart: '',
@@ -478,13 +483,31 @@ export default class FilterNumber extends Vue {
 
   public addFilterFormRules = {
     dsgroup: [
-      { validator: this.validateDsgroup,  trigger: 'blur' },
+      { validator: this.validateDsgroup,  trigger: 'change' },
     ],
     sexlist: [
       { validator: this.validateSexList,  trigger: 'change' },
     ],
-    verificationLanguage: [
-      { validator: this.verificationLanguage,  trigger: 'blur' },
+    ageStart: [
+      { validator: this.validateAgeStart,  trigger: 'blur' },
+    ],
+    ageEnd: [
+      { validator: this.validateAgeEnd,  trigger: 'blur' },
+    ],
+    province: [
+      { validator: this.validateProvince,  trigger: 'change' },
+    ],
+    flowStart: [
+      { validator: this.validateFlowStart,  trigger: 'change' },
+    ],
+    flowEnd: [
+      { validator: this.validateFlowEnd,  trigger: 'change' },
+    ],
+    consumptionStart: [
+      { validator: this.validateConsumptionStart,  trigger: 'change' },
+    ],
+    consumptionEnd: [
+      { validator: this.validateConsumptionEnd,  trigger: 'change' },
     ],
   };
 
@@ -584,11 +607,19 @@ export default class FilterNumber extends Vue {
     }, 3000);
   }
 
+  public compareNumber(val1: string, val2: string) {
+    const num1 = Number(val1);
+    const num2 = Number(val2);
+    if (num1 >= num2 || num1 < 0) {
+      return false;
+    }
+    return true;
+  }
+
   public sumbitAddFilter() {
     const form = this.$data.filterForm;
     this.$refs.filterForm.validate((valid: any) => {
       if (valid) {
-        // console.log('验证通过了');
         // 提交
         // this.createPermission(form).then((data: any) => {
         //   this.closeDialog();
@@ -602,7 +633,6 @@ export default class FilterNumber extends Vue {
     const form = this.$data.addForm;
     this.$refs.addForm.validate((valid: any) => {
       if (valid) {
-        // console.log('验证通过了');
         // 提交
         // this.createPermission(form).then((data: any) => {
         //   this.closeDialog();
@@ -659,11 +689,11 @@ export default class FilterNumber extends Vue {
 
   // 筛选部分验证
   public validateDsgroup(rule: any, value: any, callback: any) {
-    if(!value) {
+    if (!value) {
       callback(new Error('名称不可为空'));
       return false;
     }
-    if(value.length >=20) {
+    if (value.length >= 20) {
       callback(new Error('字符长度不可超过20字'));
       return false;
     }
@@ -671,21 +701,121 @@ export default class FilterNumber extends Vue {
   }
 
   public validateSexList(rule: any, value: any, callback: any) {
-    if(value.length === 0) {
+    if (value.length === 0) {
       callback(new Error('至少选中一位'));
       return false;
     }
     callback();
   }
 
-  public validateAgeList(rule: any, value: any, callback: any) {
-    if(value.length === 0) {
+  public validateAgeStart(rule: any, value: any, callback: any) {
+    const reg = new RegExp('^[0-9]*$', 'i');
+    if (value === '') {
+      callback(new Error('请输入数字'));
+      return false;
+    }
+    if (!reg.test(value)) {
+      callback(new Error('仅能输入数字'));
+      return false;
+    }
+    callback();
+  }
+
+  public validateAgeEnd(rule: any, value: any, callback: any) {
+    const reg = new RegExp('^[0-9]*$', 'i');
+    if (value === '') {
+      callback(new Error('请输入数字'));
+      return false;
+    }
+    if (!reg.test(value)) {
+      callback(new Error('仅能输入数字'));
+      return false;
+    }
+    if (!this.compareNumber(this.filterForm.ageStart, value)) {
+      callback(new Error('您所输入数字不合法'));
+      return false;
+    }
+    callback();
+  }
+
+  public validateProvince(rule: any, value: any, callback: any) {
+    const provincelist = this.area.checkedProvinces;
+    const provinceOptions = this.area.provinceOptions;
+    let IsSelectedCity = false;
+    provinceOptions.map((val) => {
+      if (val.isIndeterminate) {
+        IsSelectedCity = true;
+      }
+    });
+
+    if (provincelist.length === 0 && !IsSelectedCity) {
       callback(new Error('至少选中一位'));
       return false;
     }
     callback();
   }
 
+
+  public validateFlowStart(rule: any, value: any, callback: any) {
+    const reg = new RegExp('^[0-9]*$', 'i');
+    if (value === '') {
+      callback(new Error('请输入数字'));
+      return false;
+    }
+    if (!reg.test(value)) {
+      callback(new Error('仅能输入数字'));
+      return false;
+    }
+    callback();
+  }
+
+  public validateFlowEnd(rule: any, value: any, callback: any) {
+    const reg = new RegExp('^[0-9]*$', 'i');
+    if (value === '') {
+      callback(new Error('请输入数字'));
+      return false;
+    }
+    if (!reg.test(value)) {
+      callback(new Error('仅能输入数字'));
+      return false;
+    }
+    if (!this.compareNumber(this.filterForm.flowStart, value)) {
+      callback(new Error('您所输入数字不合法'));
+      return false;
+    }
+    callback();
+  }
+
+  public validateConsumptionStart(rule: any, value: any, callback: any) {
+    const reg = new RegExp('^[0-9]*$', 'i');
+    if (value === '') {
+      callback(new Error('请输入数字'));
+      return false;
+    }
+    if (!reg.test(value)) {
+      callback(new Error('仅能输入数字'));
+      return false;
+    }
+    callback();
+  }
+
+  public validateConsumptionEnd(rule: any, value: any, callback: any) {
+    const reg = new RegExp('^[0-9]*$', 'i');
+    if (value === '') {
+      callback(new Error('请输入数字'));
+      return false;
+    }
+    if (!reg.test(value)) {
+      callback(new Error('仅能输入数字'));
+      return false;
+    }
+    if (!this.compareNumber(this.filterForm.consumptionStart, value)) {
+      callback(new Error('您所输入数字不合法'));
+      return false;
+    }
+    callback();
+  }
+
   // // 生命周期
   // public mounted() {
   //   // this.getPermission({ size: this.size, page: this.page });