fix(Form Validation): Fix validation bug when validatables nested

Author: webzhao

src/components/form/form-item.vue

@@ -58,9 +58,17 @@ export default {
     }
   },
   created () {
+    const isParentValidatable = v => {
+      let parent = v.$parent
+      while (true) {
+        if (!parent || parent === this) return false
+        if (parent.isValidatable) return true
+        parent = parent.$parent
+      }
+    }
     this.$on('validatable-attached', v => {
       // skip child validatable if parent is validatable
-      if (v.$parent.isValidatable) return
+      if (isParentValidatable(v)) return
       this.validatable = v
     })
     this.$on('validatable-detached', v => {

src/components/form/index.md

@@ -435,6 +435,8 @@ Clair 目前支持验证的 `type` 有：
 
 除了 Clair 内置的验证规则之外，你也可以自定义验证规则。只需要提供一个规则名和一个验证函数即可。验证函数的参数为用户输入的值，如果验证失败，返回 `{ valid: false, msg: '错误提示内容' }`；验证通过则返回 `{ valid: true }` 即可。
 
+在自定义验证函数中，可以使用 `this` 访问触发验证的 Vue 组件实例。
+
 ```html
 设置密码：<c-input v-model="password" :rules="rules" />
 
@@ -447,6 +449,7 @@ Clair 目前支持验证的 `type` 有：
           required: true,
           minlength: 6,
           strength: function (val) {
+            console.log(this) // this 是 c-input 实例
             const hasNumber = /\d/.test(val)
             const hasLetter = /[a-z]/i.test(val)
             const hasSpecialChar = /\W/.test(val)
@@ -618,6 +621,52 @@ export default {
 </script>
 ```
 
+### 扩展表单组件
+
+在复杂的业务场景下，我们需要自定义表单组件，这些组件可以使用 [`v-model` 进行双向绑定](https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model)。
+
+Clair 也提供了一些方法，让你开发的自定义组件也可以使用 Clair 的表单验证机制。
+
+```javascript
+import Clair from clair
+
+/**
+ * 自定义表单组件使用Clair的表单验证系统
+ */
+Vue.component('fancy-input', {
+  mixins: [Clair.mixins.validatable],
+  props: ['value'],
+  data () {
+    return {
+      // 这里可以内置一些验证规则
+      builtinRules: {
+        ruleA (val) {
+          // ...
+        }
+      }
+    }
+  }
+  // ...
+})
+
+/**
+ * 使用 `rules` 属性传入验证规则
+ */
+new Vue({
+  el: '#app',
+  template: '<fancy-input v-model="val" :rules="rules">',
+  data () {
+    return {
+      val: '',
+      rules: {
+        required: true,
+        maxLength: 12
+      }
+    }
+  }
+})
+```
+
 ## 属性说明
 
 ### `c-form` 属性

src/scripts/mixins/validatable/index.js

@@ -82,16 +82,16 @@ export default {
   methods: {
     validate () {
       this.validity.dirty = true
-      const { $formItem } = this
+      const { $formItem, builtinRules } = this
       const required = $formItem && !this.$parent.isValidatable && $formItem.required
-      const rules = Object.assign({ required }, this.rules)
+      const rules = Object.assign({ required }, builtinRules, this.rules)
       if (!rules.msg) rules.msg = {}
       if (typeof rules.msg === 'object' && !rules.msg.required) {
         const label = $formItem && $formItem.label ? $formItem.label : ''
         const action = this.$options.name === 'c-input' ? '填写' : '选择'
         rules.msg.required = `请${action}${label.replace(/[:：]/, '')}`
       }
-      const result = Validator.validate(this.value, rules)
+      const result = Validator.validate(this.value, rules, this)
       const setValidity = v => Object.assign(this.validity, v)
       const isLatest = id => this.validationId === id
       {

src/scripts/mixins/validatable/validator.js

@@ -7,9 +7,10 @@ export default { validate }
  * 验证 value 是否符合规则
  * @param value {String} 要验证的值
  * @param rules {Object} 规则
+ * @param context {Object} 触发验证的Vue组件
  * @return {Object} 结果对象，有valid和msg两个字段
  */
-function validate (value, rules = {}) {
+function validate (value, rules = {}, context) {
   // msg 为自定义错误信息
   const { msg } = rules
   const pass = { valid: true }
@@ -20,7 +21,7 @@ function validate (value, rules = {}) {
 
   const results = Object.keys(rules)
     .filter(ruleName => canValidate(ruleName, rules[ruleName]))
-    .map(ruleName => checkSingleRule(ruleName, rules[ruleName], value, msg))
+    .map(ruleName => checkSingleRule(ruleName, rules[ruleName], value, msg, context))
 
   const hasAsync = results.some(isPromise)
   const getResult = results => {
@@ -35,9 +36,9 @@ function validate (value, rules = {}) {
 /**
  * 验证单条规则
  */
-function checkSingleRule (ruleName, param, value, msg) {
+function checkSingleRule (ruleName, param, value, msg, context) {
   const validFunction = typeof param === 'function' ? param : ruleset[ruleName]
-  const result = validFunction(value, param)
+  const result = validFunction.call(context, value, param)
   if (!result.valid && msg) { // 验证不通过且有自定义消息
     if (typeof msg === 'string') { // 自定义消息为字符串时直接使用
       result.msg = msg