Element: 表单验证的validateField方法怎么验证多个字段呢?

Created on 22 Mar 2017  ·  8Comments  ·  Source: ElemeFE/element

Function(prop: string, callback: Function(errorMessage: string))只支持单个?

Most helpful comment

@Murraya-paniculata 请问如何等待所有字段验证成功再回调呢

现在validateField并不会返回promise了, 但是可以手动创建, 如下, 可以在所有字段验证成功再回调

      let fieldsToValidate = ['uid', 'nickname'];
      let _self = this;
      Promise.all(fieldsToValidate.map(item => {
        let p = new Promise(function (resolve, reject) {
          _self.$refs['formRef'].validateField(item, (error) => {
            resolve(error)
          })
        });
        return p;
      })).then((data) => {
        console.info(data)
        // data 里是各个字段的验证错误信息, 如果为空串则认为验证通过, 如果数组里全为空串则所有验证通过
        // 判断data 里是否全是空串
      })

All 8 comments

            const valids = this.$refs.refs
            valids.validateField('imgcode', valid1 => {
                valids.validateField('phone', valid2 => {
                    if (!valid1 && !valid2) {

                    }
                })
            })

官方还不支持, 先用这种写法吧.

Hello, this issue has been closed because it does not conform to our issue requirements. Please submit issues with issue-generator. More info can be found in #3693.

这个可以直接用Promise.all来解决,因为validateField方法返回promise实例;

var vm = this,
    form = vm.$refs.form,
    fieldList = ['username', 'password', 'gender', 'email'];
Promise.all(fieldList.map(function (item) {
    return form.validateField(item).then(function (valid) {
        if (!valid) {
            return {
                success:false,
                field: item,
                message: "请填写"
            }
        }else{
            return {
                success:true,
                field: item
            }
        }
    });
})).then((data)=>{
    console.log(data);
    /*
    [ { success: false, field: 'username', message: '请填写' },
  { success: false, field: 'password', message: '请填写' },
  { success: true, field: 'gender' },
  { success: false, field: 'email', message: '请填写' } ]
     */
});

@imingyu imingyu 这个不对呀,总是报错

刚刚试了一下:
var fieldList = ['limitAmount','limitUnit'];
let form = this.$refs[forms];
Promise.all(fieldList.map(item => {
return form.validateField(item,(valid) => {
if (!valid) {
console.log('验证成功');
}else{
console.log('验证失败');
}
})
}))
这样是可以的

你好,校验成功之后并没有调用回调方法,请问如何解决呢?

@Murraya-paniculata 请问如何等待所有字段验证成功再回调呢

@Murraya-paniculata 请问如何等待所有字段验证成功再回调呢

现在validateField并不会返回promise了, 但是可以手动创建, 如下, 可以在所有字段验证成功再回调

      let fieldsToValidate = ['uid', 'nickname'];
      let _self = this;
      Promise.all(fieldsToValidate.map(item => {
        let p = new Promise(function (resolve, reject) {
          _self.$refs['formRef'].validateField(item, (error) => {
            resolve(error)
          })
        });
        return p;
      })).then((data) => {
        console.info(data)
        // data 里是各个字段的验证错误信息, 如果为空串则认为验证通过, 如果数组里全为空串则所有验证通过
        // 判断data 里是否全是空串
      })
Was this page helpful?
0 / 5 - 0 ratings

Related issues

akaylh picture akaylh  ·  3Comments

smallpath picture smallpath  ·  3Comments

EdenSpark picture EdenSpark  ·  3Comments

dbskccc picture dbskccc  ·  3Comments

no5no6 picture no5no6  ·  3Comments