vue工具类之——表单验证（自定义简单案例）

可以更具需求自行添加消息弹出层把错误信息弹出去，改写法会把错误提示信息返回到使用的页面中。
可自行扩展正则匹配验证，有需要的可以留言，后面会把相关资料发布到GITHUB

---

<div class="input"><input type="text" title="账户" v-model="userName" ref="userName"></div>

---

validation.js
/**

* description: 登录页样式文件

* create_time: 2019-01-02

* message: 不接受任何私下吐槽，请当面沟通协调

*/

import _ from 'lodash'

export default function validation(opts) {

  let valid, isValid;

  valid = false;

  // 过滤非必填项

  if (opts.ignoreRefs) {

    if (opts.ignoreRefs) {

      _.forEach(opts.ignoreRefs, item=> {

        delete opts.valid[item]

})

}

}

  // 验证

  _.forEach(opts.valid, item=> {

    // 非空

    if (item.value== '') {

      valid = false;

      isValid = item.title+ '不能为空';

    } else {

      valid = true

    }

    return valid;

  });

  if (valid) {

    //验证成功执行方法

    opts.success();

  } else {

    //验证失败执行方法

    opts.error(isValid);

  }

}

使用方法：

---

handleLogin() {

  let vue = this;

  validation({

    valid: vue.$refs,

    ignoreRefs: ['userName'],

    success: () => {

      console.log('验证成功');

      vue.$router.push({name: 'home'});

    }, error: (data) => {

      console.log(data)

    }

  });

}

更多文章可查看以前的博客 CSDN  (后续博文将更新至简书)