feat(Form): support pattern rule (#5700)

src/form/demo/ValidateRules.vue

@@ -2,18 +2,25 @@
   <demo-block :title="$t('title')">
     <van-form validate-first @sumbit="onSubmit" @failed="onFailed">
       <van-field
-        v-model="phone"
-        name="phone"
-        :label="$t('phone')"
-        :rules="phoneRules"
-        :placeholder="$t('phone')"
+        v-model="value1"
+        name="pattern"
+        :label="$t('label')"
+        :rules="[{ pattern, message: $t('message') }]"
+        :placeholder="$t('pattern')"
       />
       <van-field
-        v-model="code"
-        name="code"
-        :label="$t('code')"
-        :rules="codeRules"
-        :placeholder="$t('code')"
+        v-model="value2"
+        name="validator"
+        :label="$t('label')"
+        :rules="[{ validator, message: $t('message') }]"
+        :placeholder="$t('validator')"
+      />
+      <van-field
+        v-model="value3"
+        name="asyncValidator"
+        :label="$t('label')"
+        :rules="[{ validator: asyncValidator, message: $t('message') }]"
+        :placeholder="$t('asyncValidator')"
       />
       <div style="margin: 16px 16px 0;">
         <van-button round block type="info" native-type="submit">
@@ -28,66 +35,48 @@
 export default {
   i18n: {
     'zh-CN': {
-      code: '验证码',
-      phone: '手机号',
+      label: '文本',
       title: '校验规则',
       submit: '提交',
+      message: '请输入正确内容',
+      pattern: '正则校验',
+      validator: '函数校验',
       validating: '验证中...',
-      requireCode: '请输入验证码',
-      requirePhone: '请输入手机号',
-      incorrectCode: '验证码错误',
-      incorrectPhone: '手机号格式错误',
+      asyncValidator: '异步函数校验',
     },
     'en-US': {
-      code: 'Code',
-      phone: 'Phone',
+      label: 'Label',
       title: 'Validate Rules',
       submit: 'Submit',
+      message: 'Error message',
+      pattern: 'Use pattern',
+      validator: 'Use validator',
       validating: 'Validating...',
-      requireCode: 'Code is required',
-      requirePhone: 'Phone is required',
-      incorrectCode: 'Incorrect code',
-      incorrectPhone: 'Incorrect phone',
+      asyncValidator: 'Use async validator',
     },
   },
 
   data() {
     return {
-      code: '',
-      phone: '',
+      value1: '',
+      value2: '',
+      value3: '',
+      pattern: /\d{6}/,
     };
   },
 
-  created() {
-    this.phoneRules = [
-      { required: true, message: this.$t('requirePhone') },
-      {
-        validator: this.phoneValidator,
-        message: this.$t('incorrectPhone'),
-      },
-    ];
-
-    this.codeRules = [
-      { required: true, message: this.$t('requireCode') },
-      {
-        validator: this.codeValidator,
-        message: this.$t('incorrectCode'),
-      },
-    ];
-  },
-
   methods: {
-    phoneValidator(val) {
-      return /1\d{10}/.test(val);
+    validator(val) {
+      return val === '1234';
     },
 
-    codeValidator(val) {
+    asyncValidator(val) {
       return new Promise(resolve => {
         this.$toast.loading(this.$t('validating'));
 
         setTimeout(() => {
           this.$toast.clear();
-          resolve(/\d{6}/.test(val));
+          resolve(val === '1234');
         }, 1000);
       });
     },