美文网首页vue
登录小tip

登录小tip

作者: peakol | 来源:发表于2018-04-13 18:04 被阅读64次

    当我们有时候在写登录的逻辑时,先涉及到检验用户名,密码,验证码是否为空,在根据相应的空缺依次提示,当然在提示的时候我们遵循每次只提醒最前面的那个(这样我们就知道自己哪里没输,后面同样会去检测),我们不可能将没输的依次提醒,例如用户名,密码,验证码都没输我们只需提醒用户名,当用户名输了,后两个没输,我们只需要提醒密码没输即可(依次类推),依次有第一个为空阻断程序运行(不管后面输入框是否为空)!
    这样的逻辑在业务中如何书写看起来更简练更有逼格,在今天写登录框时,感觉这样写更好一些!巧妙的运用了数组every,当遍历时,如果满足输入框为空时,return false 就会停止遍历,如果不满足时外层return true就会继续遍历,这个特性是forEach和map不能相比的因为它们不能阻止遍历(当然报错可以)

    <script>
    export default {
      name: 'login',
      data() {
        return {
          account: {
            username: '',
            password: '',
            authcode: ''
          },
          tips: {
            username: '请输入用户名',
            password: '密码不能为空',
            authcode: '请输入验证码'
          }
        }
      },
      methods: {
        checkIsEmpty() {
          // 登录时检查输入框是否为空 (这段代码是提示的核心代码)
          Object.keys(this.account).every((item, index) => {
            if (!this.account[item]) {
              alert(this.tips[item])
              return false
            }
            return true
          })
        }
      }
    }
    </script>
    

    相关文章

      网友评论

        本文标题:登录小tip

        本文链接:https://www.haomeiwen.com/subject/grkhkftx.html