ant vue 笔记

<template>
  <div class="login">
    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
    <a-form-item label="name">
      <!-- 直接写检验规则 -->
      <a-input
         v-decorator="['name', { rules: [{ required: true, message: '请输入账号!'}],trigger: 'blur' }]" 
      />
    </a-form-item>
    <a-form-item label="password">
      <!-- 在script 里面定义更复杂的检验规则,  -->
      <a-input
        v-decorator="['password', validatorRules.password]"
      />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit">
        Login
      </a-button>
    </a-form-item>
  </a-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data(){
    return {
       form: this.$form.createForm(this),
       validatorRules: {
          password : {//name与v-decorator中属性对应
            initialValue: 123456,//初始值
            rules: [
              { required: true, message: '请输入密码!'},//此处开启校验必填
              { min: 5, message: '长度不少于 5 个字符'}, // 长度校验
              { validator: this.validateUsername},//校验规则函数，
            ],
            trigger: 'blur' // 触发方式
          },
        },
    }
  },
  created(){
    // this.$nextTick(() => {
    //     this.form.setFieldsValue({name:'yyy',password: 123});
    //   })
  },
  mounted(){
    this.form.setFieldsValue({name:'yyy',password: 123});
  },
  methods: {
     handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    validateUsername(rule, value, callback) {
        if (value.length !== 11) {
          callback('手机号格式有误')
          return
        }
        callback()
      },
  }
}
</script>