formitem

代码格式优化

src/components/app-form-item/app-form-item.vue

@@ -73,7 +73,7 @@ export default class AppFormItem extends Vue {
      * @type {string}
      * @memberof AppFormItem
      */
-    @Prop() public checkValue?: any;
+    @Prop() public itemValue?: any;
 
     /**
      * 校验值规则
@@ -81,37 +81,9 @@ export default class AppFormItem extends Vue {
      * @type {string}
      * @memberof AppFormItem
      */
-    @Watch('checkValue')
-    checkValueChange(){
-        this.checkRule();
-    }
-
-    public  checkRule(): boolean {
-        let _this = this
-        let erro_text :any = "";
-        let isCheck :boolean = true;
-        let required :boolean = true;
-        this.rules.forEach((item:any)=>{
-            if(item.hasOwnProperty('pattern') && item.trigger == 'change' &&  _this.checkValue){
-                let pattern: any =  item.pattern;
-                if(!pattern.test( _this.checkValue)){
-                    erro_text = item.message;
-                    isCheck = false;
-                }
-            }
-            if(item.hasOwnProperty('required') && item.trigger == 'change'){
-                if(item.required && ! _this.checkValue){
-                    erro_text = item.message;
-                    required = false;
-                }
-            }
-        });
-        this.errorText = erro_text;
-        if(isCheck && required){
-            return true
-        }else{
-            return false
-        }
+    @Watch('itemValue')
+    onItemValueChange() {
+        this.validateRules();
     }
 
     /**
@@ -120,8 +92,7 @@ export default class AppFormItem extends Vue {
      * @type {string}
      * @memberof AppFormItem
      */
-    public errorText = "";
-
+    public errorText: string = '';
 
     /**
      * label样式
@@ -210,23 +181,12 @@ export default class AppFormItem extends Vue {
      * @param {*} oldVal
      * @memberof AppFormItem
      */
-    @Watch('itemRules',{deep:true})
+    @Watch('itemRules', { deep: true })
     onItemRulesChange(newVal: any, oldVal: any) {
-        if (newVal) {
-            try {
-                this.rules = [];
-                const _rules: any[] = newVal;
-                this.rules = [..._rules];
-                this.rules.some((rule: any) => {
-                    if (rule.hasOwnProperty('required')) {
-                        this.required = rule.required;
-                        return true;
-                    }
-                    return false;
-                });
-            } catch (error) {
-            }
+        if (!newVal) {
+            return;
         }
+        this.computeRequired(newVal);
     }
 
 
@@ -265,23 +225,64 @@ export default class AppFormItem extends Vue {
      */
     public mounted() {
         if (this.itemRules) {
-            try {
-                const _rules: any[] = this.itemRules;
-                this.rules = [..._rules];
-                this.rules.some((rule: any) => {
-                    if (rule.hasOwnProperty('required')) {
-                        this.required = rule.required;
-                        return true;
-                    }
-                    return false;
-                });
-            } catch (error) {
-            }
+            this.computeRequired(this.itemRules);
+        }
+    }
+
+    /**
+     * 计算是否必填
+     *
+     * @private
+     * @param {*} rules
+     * @memberof AppFormItem
+     */
+    private computeRequired(rules: any): void {
+        try {
+            const _rules: any[] = rules;
+            this.rules = [..._rules];
+            this.rules.some((rule: any) => {
+                if (rule.hasOwnProperty('required')) {
+                    this.required = rule.required;
+                    return true;
+                }
+                return false;
+            });
+        } catch (error) {
         }
     }
 
+    /**
+     * 校验值规则
+     *
+     * @returns {boolean}
+     * @memberof AppFormItem
+     */
+    public validateRules(): boolean {
+        let erro_text: any = "";
+        let isCheck: boolean = true;
+        let required: boolean = true;
+        this.rules.forEach((item: any) => {
+            if (item.hasOwnProperty('pattern') && item.trigger == 'change' && this.itemValue) {
+                let pattern: any = item.pattern;
+                if (!pattern.test(this.itemValue)) {
+                    erro_text = item.message;
+                    isCheck = false;
+                }
+            }
+            if (item.hasOwnProperty('required') && item.trigger == 'change') {
+                if (item.required && !this.itemValue) {
+                    erro_text = item.message;
+                    required = false;
+                }
+            }
+        });
+        this.errorText = erro_text;
+        return isCheck && required ? true : false;
+    }
+
 }
 </script>
+
 <style lang='less'>
 @import './app-form-item.less';
 </style>
\ No newline at end of file