使用ReactJS实现一个用户名输入控件

React user name input，带输入检查和验证动画。

react, 界面组件

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4352
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class PasswordChecker extends React.Component {
    constructor(props) {
        super();
        this.state = {
            text: ""
        };

this.handleChange = this.handleChange.bind(this);
        this.checkChar = this.checkChar.bind(this);
        this.checkLower = this.checkLower.bind(this);
        this.checkUpper = this.checkUpper.bind(this);
        this.finalCheck = this.finalCheck.bind(this);
    }

handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

checkChar() {
        return this.state.text.length >= 6;
    }

checkLower() {
        let reg = /[a-z]/;
        return reg.test(this.state.text);
    }

checkUpper() {
        let reg = /[A-Z]/;
        return reg.test(this.state.text);
    }

finalCheck() {
        return this.checkUpper() && this.checkLower() && this.checkChar();
    }

render() {
        return ( < div className = "app" >
            < input type = "text"
            placeholder = "username"
            onChange = {
                this.handleChange
            }
            /> < div className = "rules" >
            < ul >
            < li className = {
                this.checkLower() ? "passed" : "missing"
            } >
            1 lowercase character < /li> < li className = {
                this.checkUpper() ? "passed" : "missing"
            } >
            1 uppercase character < /li>

< li className = {
                this.checkChar() ? "passed" : "missing"
            } >
            6 minimum characters < /li> < /ul> < /div> < button disabled = {
                this.finalCheck() ? false : true
            } > Submit < /button> < footer > Made by < a href = "#"
            target = "_blank" > Sasha Tran < /a></footer >
            < /div>
        );
    }
}

ReactDOM.render( < PasswordChecker / > , document.getElementById("container"));

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("https://fonts.googleapis.com/css?family=Inconsolata");
body {
    background: #EF767A;
    font-family: 'Lato', sans-serif;
    overflow: hidden;
}
#container {
    height: 100vh;
}
.rules,
.app,
#container {
    display: flex;
    justify-content: center;
}
#container,
.app {
    align-items: center;
}
.app {
    flex-direction: column;
    height: 400px;
}
.app ul {
    padding: 0;
}
.app li {
    color: #FFDBB5;
    letter-spacing: 1px;
    font-weight: 300;
    font-size: 16px;
    margin: 5px;
}
.app .passed {
    color: rgba(255, 255, 255, 0.3);
    transition: 0.4s all;
    text-decoration: line-through;
}
.app .missing {
    color: #FFDBB5;
    transition: 0.4s all;
}
.rules {
    width: 330px;
}
input,
button {
    border: none;
    outline: none;
}
input {
    background: none;
    width: 260px;
    border-bottom: 3px solid #FFDBB5;
    color: white;
    font-size: 27px;
    transition: 0.4s all;
    text-align: center;
}
input:focus {
    width: 330px;
    transition: 0.4s all;
}
::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
button {
    background: #FFDBB5;
    width: 120px;
    height: 30px;
    font-size: 15px;
    color: #EF767A;
    border-radius: 4px;
    transition: 0.4s all;
    cursor: pointer;
}
button:disabled {
    opacity: 0.5;
    transition: 0.4s all;
}
button:disabled:hover {
    animation: 500ms shake;
}
button:hover {
    animation: 500ms nod infinite;
}
@keyframes shake {
    0% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-3deg);
    }
    70% {
        transform: rotate(3deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes nod {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(2px);
    }
    100% {
        transform: translateY(0px);
    }
}
footer {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 13px;
    font-family: 'Inconsolata', monospace;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}
footer a {
    color: #FFDBB5;
}

HTML

React user name input，带输入检查和验证动画。

react, 界面组件

编辑器支持Emmet

快捷键

React user name input，带输入检查和验证动画。

react, 界面组件

使用ReactJS实现的一款图片轮播界面组件

使用ReactJS实现的一个简化版无尽地牢RPG游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：