feat(lazy option): support manual trigger only validate (#45)

* feat(lazy): prevent rules from being automatically verified when data changes

* docs: update comments

* chore: more readable if statement instead

* docs: fix typo

* docs(lazy): update docs

* docs: apply suggestions from code review

Co-authored-by: Ayaka Neko <[email protected]>

Co-authored-by: Ayaka Neko <[email protected]>

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
   "editor.defaultFormatter": "dprint.dprint",
   "dprint.path": "node_modules/dprint/dprint",
-  "unocss.root": "example"
+  "unocss.root": "example",
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  }
 }

README.md

@@ -169,7 +169,7 @@ dirtyFields.value /* value: {} */
 
 ### Validating rules for form
 
-Use `rule` to define the validation rules for form fields. The verification process will be take placed automatically when values of fields have been changed, the validation result will be stored and provided in `status[key].isError` and `status[key].message` properties. If one fields requires more then one rule, it can be declared by using function arrays.
+Use `rule` to define the validation rules for form fields. The verification process will be take placed automatically when values of fields have been changed, the validation result will be stored and provided in `status[key].isError` and `status[key].message` properties. If one fields requires more than one rule, it can be declared by using function arrays.
 
 > You can also maintain your rule collections on your own, and import them where they are needed.
 
@@ -299,6 +299,38 @@ const { form, status } = useForm({
 </p>
 </details>
 
+<details><summary>Lazy rule validation</summary>
+<p>
+
+You can set `lazy` to `true` to prevent rules from being automatically verified when data changes.
+
+In this case, consider call `verify()` or `status[fieldName].verify()` to manually validate fields.
+
+```ts
+const { form, status, verify } = useForm({
+  form: () => ({
+    userName: '',
+    /* ... */
+  }),
+
+  rule: {
+    userName: v => v.length < 3,
+  },
+
+  lazy: true,
+})
+
+form.userName = 'abc'
+status.userName.isError // false
+
+verify()
+
+status.userName.isError // true
+```
+
+</p>
+</details>
+
 ### Submission
 
 `submitter` accepts a callback function as argument which returns the function that be able to triggered this callback function and a state variable that indicates the function is running. The callback function passed into `submitter` can get all the states and functions returned by the `useForm`, which allows you to put the callback function into separate code or even write generic submission functions for combination easily.

README.zh-Hans.md

@@ -297,6 +297,38 @@ const { form, status } = useForm({
 </p>
 </details>
 
+<details><summary>规则懒校验</summary>
+<p>
+
+将 `lazy` 设置为 `true` 可以阻止数据变化时规则自动校验。
+
+此时, 可以考虑调用 `verify()` 或 `status[fieldName].verify()` 来手动校验字段。
+
+```ts
+const { form, status, verify } = useForm({
+  form: () => ({
+    userName: '',
+    /* ... */
+  }),
+
+  rule: {
+    userName: v => v.length < 3,
+  },
+
+  lazy: true,
+})
+
+form.userName = 'abc'
+status.userName.isError // false
+
+verify()
+
+status.userName.isError // true
+```
+
+</p>
+</details>
+
 ### 提交
 
 `submitter` 接受一个回调函数参数，返回触发这个回调函数的函数和表示函数运行中的状态变量；传入 `submitter` 的回调函数可以拿到 `useForm` 函数返回的所有状态和函数，这样可以将回调函数放到单独的代码中，甚至编写通用的提交函数，方便组合使用。