feat(Field): support validator in rules

src/field/index.js

@@ -157,6 +157,14 @@ export default createComponent({
           if (rule.required && this.formValueEmpty) {
             messages.push(rule.message);
           }
+
+          if (rule.validator) {
+            const result = rule.validator(this.formValue);
+
+            if (!result) {
+              messages.push(rule.message);
+            }
+          }
         });
 
         if (messages.length) {

src/form/README.md

@@ -14,7 +14,7 @@ Vue.use(Form);
 ### Basic Usage
 
 ```html
-<van-form @submit="onSubmit" @failed="onFailed">
+<van-form @submit="onSubmit">
   <van-field
     v-model="username"
     name="Username"
@@ -48,9 +48,6 @@ export default {
     onSubmit(values) {
       console.log('submit', values);
     },
-    onFailed(errorInfo) {
-      console.log('failed', errorInfo);
-    },
   },
 }
 ```

src/form/README.zh-CN.md

@@ -20,7 +20,7 @@ Vue.use(Form);
 在表单中，每个 [Field](#/zh-CN/field) 代表一个表单项，使用 Field 的`rules`属性可以定义校验规则
 
 ```html
-<van-form @submit="onSubmit" @failed="onFailed">
+<van-form @submit="onSubmit">
   <van-field
     v-model="username"
     name="用户名"
@@ -50,6 +50,43 @@ export default {
       password: '',
     };
   },
+  methods: {
+    onSubmit(values) {
+      console.log('submit', values);
+    },
+  },
+};
+```
+
+### 校验规则
+
+在`rules`中，可以通过`validator`字段定义校验函数，校验函数返回`false`时表示校验不通过
+
+```html
+<van-form>
+  <van-field
+    v-model="value"
+    label="手机号"
+    :rules="rules"
+    placeholder="手机号"
+    @submit="onSubmit"
+    @failed="onFailed"
+  />
+  <div style="margin: 16px;">
+    <van-button round block type="info">提交</van-button>
+  </div>
+</van-form>
+```
+
+```js
+export default {
+  data() {
+    this.rules = [
+      { required: true, message: '请输入手机号' },
+      { validator: val => /1\d{10}/.test(val), message: '手机号格式错误' },
+    ];
+    return { value: '' };
+  },
   methods: {
     onSubmit(values) {
       console.log('submit', values);

src/form/demo/ValidateRules.vue

@@ -0,0 +1,64 @@
+<template>
+  <demo-block :title="$t('title')">
+    <van-form>
+      <van-field
+        v-model="value"
+        :label="$t('phone')"
+        :rules="rules"
+        :placeholder="$t('phone')"
+        @submit="onSubmit"
+        @failed="onFailed"
+      />
+      <div style="margin: 16px 16px 0;">
+        <van-button type="info" round block>{{ $t('submit') }}</van-button>
+      </div>
+    </van-form>
+  </demo-block>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      phone: '手机号',
+      title: '校验规则',
+      submit: '提交',
+      required: '请输入手机号',
+      incorrectFormat: '手机号格式错误',
+    },
+    'en-US': {
+      phone: 'Phone',
+      title: 'Validate Rules',
+      submit: 'Submit',
+      required: 'Phone is required',
+      incorrectFormat: 'Incorrect format',
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+    };
+  },
+
+  created() {
+    this.rules = [
+      { required: true, message: this.$t('required') },
+      {
+        validator: val => /1\d{10}/.test(val),
+        message: this.$t('incorrectFormat'),
+      },
+    ];
+  },
+
+  methods: {
+    onSubmit(values) {
+      console.log('submit', values);
+    },
+
+    onFailed(errorInfo) {
+      console.log('failed', errorInfo);
+    },
+  },
+};
+</script>

src/form/demo/index.vue

@@ -1,18 +1,21 @@
 <template>
   <demo-section>
     <basic-usage />
+    <validate-rules />
     <field-type />
   </demo-section>
 </template>
 
 <script>
 import BasicUsage from './BasicUsage';
+import ValidateRules from './ValidateRules';
 import FieldType from './FieldType';
 
 export default {
   components: {
     BasicUsage,
     FieldType,
+    ValidateRules,
   },
 };
 </script>

src/form/test/__snapshots__/demo.spec.js.snap

@@ -19,6 +19,17 @@ exports[`renders demo correctly 1`] = `
       <div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
     </form>
   </div>
+  <div>
+    <form class="van-form">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>手机号</span></div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body"><input type="text" placeholder="手机号" class="van-field__control"></div>
+        </div>
+      </div>
+      <div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
+    </form>
+  </div>
   <div>
     <form class="van-form">
       <div class="van-cell van-field">
@@ -150,7 +161,7 @@ exports[`renders demo correctly 1`] = `
                       <!----></i>
                   </div>
                   <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
-                      <!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
+                      <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
                 </div>
               </div>
             </div>