【DEMO】关于form的template语法自动校验功能建议

[webees]

由于项目正在从iview迁移过来，所以在使用vue-antd-ui的过程中会有不少的疑问。得知0.6.2支持template语法自动校验功能，于是便和团队一起尝试了下，发现在实际操作中还是有诸多不便，下面仅仅以登陆为例说明。 之前的demo请参考 https://github.com/vueComponent/ant-design/issues/43

1、 :fieldDecoratorOptions="{rules: [{ required: true, message: 'Please input your name' }]}" 改为 :fieldDecoratorOptions="[{ required: true, message: 'Please input your name' }]"会不会好些。 虽然可以这样：:fieldDecoratorOptions="{rules: [d_rules]}" 其中d_rules是Vue 实例的数据，但是我们在将fieldDecoratorOptions绑定到vue实例数据时候：

不可能这样干：
account: {
rules: [{规则一},{规则二}]
},
password:{
rules: [{规则一},{规则二}]
}
更多的是这样：
rules: {
account: [{规则一},{规则二}],
password: [{规则一},{规则二}],
}

2、:fieldDecoratorOptions是否可能去掉，像iview一样在a-form指定rules

期待得到优化，感谢大家的付出。

下面这个demo是之前iview实现的自动校验，线上正在使用，自动校验基于 async-validator，blur事件也会触发校验。不得不说已经尽量简洁了。

<template>
  <div class="login">
    <!-- 表单 -->
    <Form ref="form" :model="d_form" :rules="d_form_check">
      <Form-item prop="account">
        <i-input ref="d_form.account" v-model="d_form.account" :maxlength="32" type="text" size="large" autocomplete="off" spellcheck="false" placeholder="用户名/邮箱"></i-input>
      </Form-item>
      <Form-item ref="password" prop="password">
        <i-input ref="d_form.password" v-model="d_form.password" :maxlength="32" type="password" size="large" autocomplete="off" spellcheck="false" placeholder="6~32位密码"></i-input>
      </Form-item>
      <Checkbox class="remember" v-model="d_form.remember">七日内免登录</Checkbox>
      <Button v-on:click="submit()" type="primary" size="large" long>账号登录</Button>
    </Form>
  </div>
</template>

<script>
import {sleep} from '../../libs/function'
import apiMe from '../../api/me'

export default {
  data() {
    return {
      d_loading: false,
      d_form: {
        account: '',
        password: '',
        remember: false
      },
      d_form_check: {
        account: [
          {
            trigger: 'blur',
            required: true,
            message: '用户名不能为空！'
          },
          {
            trigger: 'blur',
            async validator(rule, value, callback) {
              let type = ''
              if (/^1[34578]{1}\d{9}$/.test(value)) type = 'phone'
              else if (/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(value)) type = 'email'
              else if (/^(?!\d+)[a-zA-Z0-9_-]{1,32}$/.test(value)) type = 'username'
              else return callback(new Error('账号格式错误！'))

              let res = await apiMe.uniqueness(type, value)
              if (!res.data) return callback(new Error('该账号未注册！'))

            }
          }
        ],
        password: [
          {
            trigger: 'blur',
            required: true,
            message: '密码不能为空！'
          },
          {
            trigger: 'blur',
            min: 6,
            message: '密码至少6位！'
          }
        ]
      }
    }
  },
  watch: {
    'd_form.account': function(newValue) {
      this.d_form.account = newValue.toLowerCase()
    }
  },
  methods: {
    async submit() {
      if (this.d_loading) return
      this.d_loading = true
      this.$refs.form.validate(async errors => {
        if (!errors) {
          this.d_loading = false
          return false
        }
        await this.$store.actions('me/login', {
          form: this.d_form,
          cbRes: async () => {
            this.$router.push({path: '/home'})
          },
          cbErr: async err => {
            this.$refs.password.error = ''
            await sleep(200)
            if (err.response.data.error.code === 'LOGIN_FAILED') this.$refs.password.error = '账号或密码错误！'
            if (err.response.data.error.code === 'LOGIN_FAILED_EMAIL_NOT_VERIFIED') this.d_code = -1
          }
        })
        await sleep(1000)
        this.d_loading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.remember {
  padding-left: 2px;
  margin-bottom: 12px;
}
</style>

[tangjinzhou]

fieldDecoratorOptions对应getFieldDecorator(id, options) 参数的options，功能很多，不是简单的使用iview方式可以完全实现的，如果习惯了iview的方式，建议自行封装一层。

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.