added validation rules & styling

el-jacko · Jun 4, 2017 · 35c8d48 · 35c8d48
1 parent 690bb85
commit 35c8d48
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 10 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -30,14 +30,10 @@
             editable: true,
             validator: {
               rules: [
-                'required',
-                'email',
-                'contains:hansi',
+                'ip4',
               ],
               messages: [
-                'Field is required',
-                'Wrong email format',
-                'Must contain Hansi',
+                'Must be alpha',
               ],
             },
           },

diff --git a/src/components/VueEditortable.vue b/src/components/VueEditortable.vue
@@ -91,7 +91,7 @@
           <icon name="spinner" spin class="spinner"></icon>
         </div>
       </div>
-      <div v-if="cell.hasErrors.length > 0">{{ cell.hasErrors[0] }}</div>
+      <div v-if="cell.hasErrors.length > 0" class="validation-error">{{ cell.hasErrors[0] }}</div>
     </td>
   </tr>
 </tbody>
@@ -1282,6 +1282,10 @@
   #pagination a.btn.disabled:hover {
     background-color: #fff;
   }
+  .validation-error {
+    color: red;
+    font-size: 0.8em;
+  }
 
   @media only screen and (max-width: 713px) {
     table.vue-editortable {

diff --git a/src/mixins/Validator.js b/src/mixins/Validator.js
@@ -30,14 +30,72 @@ export default {
         case 'contains':
           res = validator.contains(value, paraOne);
           break;
+        case 'int':
+          res = validator.isInt(value);
+          break;
+        case 'float':
+          res = validator.isFloat(value);
+          break;
         case 'min':
-          res = validator.isInt(value, { min: paraOne });
+          if (validator.isInt(value)) {
+            res = validator.isInt(value, { min: parseInt(paraOne, 10) });
+          } else if (validator.isFloat(value)) {
+            res = validator.isFloat(value, { min: parseFloat(paraOne, 10) });
+          }
           break;
         case 'max':
-          res = validator.isInt(value, { max: paraOne });
+          if (validator.isInt(value)) {
+            res = validator.isInt(value, { max: parseInt(paraOne, 10) });
+          } else if (validator.isFloat(value)) {
+            res = validator.isFloat(value, { max: parseFloat(paraOne, 10) });
+          }
           break;
         case 'between':
-          res = validator.isInt(value, { min: paraOne, max: paraTwo });
+          if (validator.isInt(value)) {
+            res = validator.isInt(value, { min: parseInt(paraOne, 10),
+              max: parseInt(paraTwo, 10) });
+          } else if (validator.isFloat(value)) {
+            res = validator.isFloat(value, { min: parseFloat(paraOne, 10),
+              max: parseFloat(paraTwo, 10) });
+          }
+          break;
+        case 'gt':
+          if (validator.isInt(value)) {
+            res = validator.isInt(value, { gt: parseInt(paraOne, 10) });
+          } else if (validator.isFloat(value)) {
+            res = validator.isFloat(value, { gt: parseFloat(paraOne, 10) });
+          }
+          break;
+        case 'lt':
+          if (validator.isInt(value)) {
+            res = validator.isInt(value, { lt: parseInt(paraOne, 10) });
+          } else if (validator.isFloat(value)) {
+            res = validator.isFloat(value, { lt: parseFloat(paraOne, 10) });
+          }
+          break;
+        case 'alpha':
+          res = validator.isAlpha(value, paraOne);
+          break;
+        case 'alphaNum':
+          res = validator.isAlphanumeric(value, paraOne);
+          break;
+        case 'bool':
+          res = validator.isBoolean(value);
+          break;
+        case 'url':
+          res = validator.isURL(value);
+          break;
+        case 'fqdn':
+          res = validator.isFQDN(value);
+          break;
+        case 'hexColor':
+          res = validator.isHexColor(value);
+          break;
+        case 'ip4':
+          res = validator.isIP(value, 4);
+          break;
+        case 'ip6':
+          res = validator.isIP(value, 6);
           break;
         default:
           res = false;