Vue

by JRoger Song

HTML

<link rel="stylesheet" href="https://lib.baomitu.com/element-ui/2.4.11/theme-chalk/index.css">
<script src="https://lib.baomitu.com/element-ui/2.4.11/index.js"></script>
<script src="https://lib.baomitu.com/element-ui/2.4.11/locale/zh-CN.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <el-input type="text" v-model="xxx" @keyup.13="toggle"></el-input>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
input{outline:none;}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    xxx: ''
  },
  methods: {
  	toggle () {
    	console.log('active...' + Date.now());
        //console.log(e);
        this.validator().then(data => {
        	this.info('ok');
        }).catch(err => {
        	this.info('error');
        });
        return false;
    },
    validator () {
    	const me = this;
    	return new Promise((resolve, reject) => {
            me.$prompt('请输入用户名', '身份验证', {
                confirmButtonText: '验证',
                cancelButtonText: '取消',
                inputErrorMessage: '用户名格式不正确',
                inputValidator: function (inputValue) {
                    if (inputValue === null) inputValue = '';
                    if (/[z-z0-9A-Z]{6,20}/gi.test(inputValue)) {
                    	console.log('validate: true')
                    	return true;
                    } else {
                    	console.log('validate: false')
                    	return false;
                    }
                }
            }).then(({ value }) => {
                resolve({code: 0});
            }).catch(err => {
                // eslint-disable-next-line prefer-promise-reject-errors
                reject({
                    code: -1,
                    message: ['身份验证失败'],
                    error: err
                });
            });
        });
    },
    info(message) {
        this.$message({
            showClose: true,
            type: 'info',
            message: message
        });
    },
  }
})