feat: add hexColor validation rule

src/locale/lang/en.ts

@@ -66,4 +66,6 @@ export const en_messages: RulesMessages = {
   gthan: 'This field must be a numeric value greater than :arg0',
   dateBetween: 'The date must be between :arg0 and :arg1',
   numberBetween: 'This field must be a numeric value between :arg0 and :arg1',
+  hexColor:
+    'The :field must be a valid hexadecimal color (e.g., #FFF or #FFFFFF)',
 };

src/rules/string.ts

@@ -480,3 +480,26 @@ export const stringBetween: RuleCallBack = (input, min_max) => {
     value: input,
   };
 };
+
+/**
+ * Validates a hexadecimal color code.
+ *
+ * @param input - The input to validate.
+ * @example
+ * ```html
+ * <input data-tr-rules="hexColor" />
+ * ```
+ */
+export const hexColor: RuleCallBack = (input) => {
+  if (typeof input !== 'string') {
+    return {
+      passes: false,
+      value: input,
+    };
+  }
+  const regex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  return {
+    passes: regex.test(input),
+    value: input,
+  };
+};

tests/rules/string.test.ts

@@ -11,6 +11,7 @@ import {
   startWithUpper,
   stringBetween,
   url,
+  hexColor,
 } from '../../src/rules/string';
 //Email
 describe('email rule', () => {
@@ -333,3 +334,42 @@ describe('stringBetween', () => {
     expect(result2).toBe(false);
   });
 });
+
+describe('hexColor rule', () => {
+  it('should pass with valid 6-character hex color', () => {
+    expect(hexColor('#FFFFFF').passes).toBe(true);
+    expect(hexColor('#000000').passes).toBe(true);
+    expect(hexColor('#ff5733').passes).toBe(true);
+    expect(hexColor('#AbCdEf').passes).toBe(true);
+  });
+
+  it('should pass with valid 3-character hex color', () => {
+    expect(hexColor('#FFF').passes).toBe(true);
+    expect(hexColor('#000').passes).toBe(true);
+    expect(hexColor('#f5a').passes).toBe(true);
+  });
+
+  it('should fail without hash symbol', () => {
+    expect(hexColor('FFFFFF').passes).toBe(false);
+    expect(hexColor('FFF').passes).toBe(false);
+  });
+
+  it('should fail with invalid characters', () => {
+    expect(hexColor('#GGGGGG').passes).toBe(false);
+    expect(hexColor('#XYZ').passes).toBe(false);
+    expect(hexColor('#12345G').passes).toBe(false);
+  });
+
+  it('should fail with wrong length', () => {
+    expect(hexColor('#FF').passes).toBe(false);
+    expect(hexColor('#FFFF').passes).toBe(false);
+    expect(hexColor('#FFFFF').passes).toBe(false);
+    expect(hexColor('#FFFFFFF').passes).toBe(false);
+  });
+
+  it('should fail with non-string input', () => {
+    expect(hexColor(123).passes).toBe(false);
+    expect(hexColor(null).passes).toBe(false);
+    expect(hexColor(undefined).passes).toBe(false);
+  });
+});

tsconfig.json

@@ -14,6 +14,9 @@
     "target": "es6" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     "lib": [
       "es2015",
+      "es2016",
+      "es2017",
+      "es2020",
       "dom"
     ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */