fix: regex rule don't work with applyIf modifier #63

victorgarciaesgi · Feb 24, 2025 · 782be0e · 782be0e
1 parent 87b536d
commit 782be0e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 17 deletions.
diff --git a/docs/src/core-concepts/rules/built-in-rules.md b/docs/src/core-concepts/rules/built-in-rules.md
@@ -343,7 +343,7 @@ const { r$ } = useRegle({ aliment: 'Fish' }, {
 ## `regex`
 
 _**Params**_
-- `...regexps: [...Ref<RegExp> | RegExp | () => RegExp]`
+- `...regexps: [MaybeRefOrGetter<RegExp | RegExp[]>]`
 
 Checks if the value matches one or more regular expressions.
 

diff --git a/docs/src/core-concepts/rules/reusable-rules.md b/docs/src/core-concepts/rules/reusable-rules.md
@@ -117,6 +117,14 @@ myValidator(5)
 myValidator(5, 'foo', 'bar');
 ```
 
+
+:::warning
+
+While adding spread parameters `...anyOtherArg` is supported, keep in mind that it will receive every parameters, even the ones injected by a parent modifier like `applyIf`, `and`, `or` etc..
+
+So it's not advised to use it
+:::
+
 ### Reactivity
 
 The real advantage of using `createRule` is that it automatically registers parameters as reactive dependencies. This means your rule works seamlessly with plain values, refs, or getter functions.

diff --git a/packages/rules/src/rules/regex.ts b/packages/rules/src/rules/regex.ts
@@ -5,13 +5,15 @@ import { isFilled, matchRegex } from '../helpers';
 /**
  * Checks if the value matches one or more regular expressions.
  */
-export const regex: RegleRuleWithParamsDefinition<string | number, [...regexp: RegExp[]], false, boolean> = createRule({
-  type: 'regex',
-  validator(value: Maybe<string | number>, ...regexp: RegExp[]) {
-    if (isFilled(value)) {
-      return matchRegex(value, ...regexp);
-    }
-    return true;
-  },
-  message: 'This field does not match the required pattern',
-});
+export const regex: RegleRuleWithParamsDefinition<string | number, [regexp: RegExp | RegExp[]], false, boolean> =
+  createRule({
+    type: 'regex',
+    validator(value: Maybe<string | number>, regexp: RegExp | RegExp[]) {
+      if (isFilled(value)) {
+        const filteredRegxp = Array.isArray(regexp) ? regexp : [regexp];
+        return matchRegex(value, ...filteredRegxp);
+      }
+      return true;
+    },
+    message: 'This field does not match the required pattern',
+  });
diff --git a/packages/rules/src/rules/tests/regex.spec.ts b/packages/rules/src/rules/tests/regex.spec.ts
@@ -8,7 +8,7 @@ describe('regex validator', () => {
   it('validates truthy values against regex', () => {
     expect(regex(/ad/).exec('aaa')).toBe(false);
     expect(regex(/ad/).exec('ad')).toBe(true);
-    expect(regex(/^a.*d$/, /\d{3}/).exec('ads')).toBe(false);
-    expect(regex(/^a.*d$/, /\d{3}/).exec('a123d')).toBe(true);
+    expect(regex([/^a.*d$/, /\d{3}/]).exec('ads')).toBe(false);
+    expect(regex([/^a.*d$/, /\d{3}/]).exec('a123d')).toBe(true);
   });
 });
diff --git a/playground/vue3/src/components/Test13.vue b/playground/vue3/src/components/Test13.vue
@@ -1,6 +1,6 @@
 <template>
   <main>
-    <input type="file" @change="handleEvent" placeholder="Competency" />
+    <input v-model="data.competency" placeholder="test" />
     <ul v-if="r$Merged.$errors.r$.competency">
       <li v-for="error of r$Merged.$errors.r$.competency" :key="error">
         {{ error }}
@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
 import { mergeRegles, useRegle } from '@regle/core';
-import { numeric, required } from '@regle/rules';
+import { applyIf, numeric, regex, required, withMessage } from '@regle/rules';
 import { ref } from 'vue';
 import JSONViewer from './JSONViewer.vue';
 
@@ -32,7 +32,7 @@ function handleEvent(event: Event) {
 }
 
 const data = ref({
-  competency: new Date(),
+  competency: 0,
   level: { id: 1 },
 });
 
@@ -42,7 +42,7 @@ const data2 = ref({
 });
 
 const { r$ } = useRegle(data, {
-  competency: { required },
+  competency: { number: applyIf(() => true, withMessage(regex(/\d/), 'Your password must have one number')) },
   level: {
     id: { required },
   },