iview中form表单自定义校验事件

示例一：这里校验输入的生成的验证码与输入的验证码是否一致。

1. 在form表单里定义一个校验对象。 verify 就是校验对象

<Form ref="accountNumber" 
      :label-width="180" 
      :model="formValidate"  
      :rules="verify">

      <Row>
        <Col span="18">
          <FormItem prop="authCode">
            <Icon class="icon_dp" custom="iconfont icon-dunpai"  />
            <Input v-model="formValidate.authCode" placeholder="请输入验证码" clearable>
            <Icon custom="iconfont icon-dunpai" slot="prefix" />
            <span slot="append">
               <securityCode @send="incident" slot="suffix"></securityCode>
            </span>
            </Input>
          </FormItem>
         </Col>
     </Row>

</Form>

在 <FormItem prop="authCode"></Form> 里面prop必须要绑定校验字段。

2. 校验对象里的参数。

data(){
  return {
      verify:{
        mailbox:[ 
          { required: true, message:'请填写邮箱', trigger: 'blur' }, 
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        authCode:[
          { required: true, message: '请填写验证码', trigger: 'blur' },
          { validator:validateCode, message:'验证码不正确请重新输入',trigger: 'blur' }
        ],
        sendVerificationCode:[
          { required: true, message:'请填写短信验证码', trigger: 'blur' },
        ]
      },
  }
}

3. 这validateCode 数据就是在这里进行校验的。

data(){
    const validateCode = (rule, value, callback) =>{
      let errors = []
      if(value !== this.identifyingCode ){
        callback("验证码不正确请重新输入")
      }
      callback(errors)
    }

   return {

   }
}

4. 直接在data里面写就可以了，不需要再return 里写。

注意：let errors = [] 和 callback(errors) 必须要写，不然后面会有一个图标一直在加载中。

示例二：两次密码输入的是否一致。

1. 跟上面同样的方法

examine:{
  password:[ {required: true, message: '请输入密码', trigger: 'blur'} ],
  confirmPassword:[ 
    {required: true, message: '请确认密码', trigger: 'blur'},
    {validator:confirmNewPasswordValidate,message:"两次密码输入不一致",trigger:'blur'}
  ]
},

2. 同样也在 confirmNewPasswordValidate 中处理校验。

  data(){
    const validateCode = (rule, value, callback) =>{
      let errors = []
      if(value !== this.identifyingCode ){
        callback("验证码不正确请重新输入")
      }
      callback(errors)
    }
   return {

   }
}

最终效果就如上所示。

iview中form表单自定义校验事件

猜你喜欢