ant Design 表单以及表单验证

今天用ant Design写了个修改密码的功能，随便记录一下

效果图

html代码

<div>
    <a-modal v-model="visible" title="修改密码" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" :disabled="hasErrors(form.getFieldsError())" @click="handleOk">
          提交
        </a-button>
      </template>

<!--      下面的表单用form 表单-->

      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
        <a-form-item label="账号">
          <a-input size="large"
                   placeholder="请输入账号"
                   allow-clear
                   v-decorator="['username',validatorRules.username]">
            <a-icon slot="prefix"
                    type="user"
                    :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input>
        </a-form-item>

        <a-form-item label="密码">
          <a-input-password
                   size="large"
                   placeholder="请输入密码"
                   allow-clear
                   v-decorator="['password',validatorRules.password]">
            <a-icon slot="prefix"
                    type="lock"
                    :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input-password>
        </a-form-item>

        <a-form-item label="新密码">
          <a-input-password
              size="large"
              placeholder="请输入新密码"
              allow-clear
              v-decorator="['newPassword1',validatorRules.newPassword1]">
            <a-icon slot="prefix"
                    type="lock"
                    :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input-password>
        </a-form-item>

        <a-form-item label="确认新密码">
          <a-input-password
              size="large"
              placeholder="请输入新密码"
              allow-clear
              v-decorator="['newPassword2',validatorRules.newPassword2]">
            <a-icon slot="prefix"
                    type="lock"
                    :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input-password>
        </a-form-item>

      </a-form>

    </a-modal>
  </div>

js代码

export default {
  name: 'ModifyPassword',
  data() {
    return {
      loading: false,
      visible: false,

      form: this.$form.createForm(this),

      // 每个控件的验证规则
      validatorRules: {
        username: {rules: [{required: true, message: '请输入用户名!'}, {validator: this.validatePass,tirgger: 'change'}]},
        password: {rules: [{required: true, message: '请输入密码!'},{validator: this.validatePass,tirgger: 'change'}]},
        newPassword1: {rules: [{required: true, message: '请输新入密码!'},{validator: this.validatePass1,tirgger: 'change'}]},
        newPassword2: {rules: [{required: true, message: '请输新入密码!'},{validator: this.validatePass2,tirgger: 'change'}]},
      },

    };
  },
  methods: {
    handleSubmit(e) {
      console.log('这里')
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    // 输入框长度验证方法
    validatePass(rule, value, callback){
      if (value.length<6 || value.length>12) {
        callback(new Error('长度应为6到12位'))
      }
      callback()
    },
    validatePass1(rule, value, callback){
      if (value.length<6 || value.length>12) {
        callback(new Error('长度应为6到12位'))
      }else
        // 验证新密码不能与旧密码一致
        if(this.form.getFieldValue('newPassword1')==this.form.getFieldValue('password')){
        callback(new Error('新密码不能与旧密码一致'))
      }
      callback()
    },
    validatePass2(rule, value, callback){
      // 验证输入长度
      if (value.length<6 || value.length>12) {
        callback(new Error('长度应为6到12位'))
      }else
        // 验证两次输入的新密码是否一致
      if(this.form.getFieldValue('newPassword1')!=this.form.getFieldValue('newPassword2')){
        callback(new Error('输入的新密码不一致'))
      }
      callback()
    },
    // 所有输入框正确输入提交按钮才能操作
    hasErrors(fieldsError) {
      return Object.keys(fieldsError).some(field => fieldsError[field]);
    },


      // 开启弹窗
    showModal() {
      this.visible = true;
    },
    // 关闭弹窗
    handleCancel(e) {
      console.log(e)
      this.visible = false;
    },
    // 提交更改密码操作（再这里面接口返回数据）
    handleOk(e) {
      console.log(e)
      this.loading = true;
      setTimeout(() => {
        this.visible = false;
        this.loading = false;
      }, 3000);
    },
  },
};

主要用到了几个表单属性，和几个api

form为一组控件，username  password  newPassword1 newPassword2这四个为单个控件被form包含

提交按钮处用到

form.getFieldsError() ：获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error

判断所有的输入框验证是否通过

validator 为自定义验证规则（有一些简单的规则可以用ant 自带的）

form.getFieldValue（‘控件名称’）：获取一个输入控件的值