react.js 表單驗證-登錄框

import React,{ Component } from 'react';
import style from 'cms.css';
​
/** * 路由路徑 登錄成功后頁面跳轉到index */
import { index } from 'config';
​
export default class Login extends Component {
    constructor(props){
        super(props);
        this.state = {
            userName: "",
            userPassword: "",
            isRemember: false,
            unameHelp: "",
            upwdHelp: ""
        }
    }
​
 //監聽input中的數據，保存到state中
    changeUsername(e){
        let uname = e.target.value;
        this.setState({
            userName: uname
        });
        console.log(this.state.userName);
    }
​
    changePassword(e){
        let upwd = e.target.value;
        this.setState({
            userPassword: upwd
        })
    }
​
    //是否記住密碼
    handleCheckbox(e){
        let isChecked = e.target.checked;
        if(isChecked){
            this.setState({
                isRemember: true
            })
        }else{
            this.setState({
                isRemember: false
            })
        }
    }
​
    //點擊登錄按鈕，觸發后台接口提供的驗證，對數據的處理等方法
    handleClick(){
        if(this.state.userName === ""||this.state.userName === null){
            this.setState({
                unameHelp: "* 用戶名不能為空"
            })
        }else if(this.state.userPassword === ""||this.state.userPassword === null){
            this.setState({
                unameHelp: "",
                upwdHelp: "* 密碼不能為空"
            })
        }else{
            this.setState({ //清除help-block提示文字
                unameHelp: "",
                upwdHelp: ""
            });
 
            if(this.state.isRemember === true){ //是否記住密碼，若記住，則保存至localstorage，反之，清除
                // let loginData = {this.state.userName,this.state.userPassword};
                let loginData = {};
                loginData.userName = this.state.userName;
                loginData.userPassword = this.state.userPassword;
                Data.localSetItem("mm_loginStatus",loginData);
            }else{
                Data.localRemoveItem("jiaj-loginStatus");
            }
 
            this.props.login(this.state.userName,this.state.userPassword);
            console.log(this.state);
        }
​
​
    }
​
    render(){
​
        return (
            <div className="login-box">
​
                <div className="login-title">登   錄</div>
                <form action="" className="form-horizontal">
                    <div className="form-group input-text">
                        <label htmlFor="uname">賬號</label>
                        <input type="text" className="form-control" name="username" id="uname" ref="uname" placeholder="手機號/用戶名"
                               onChange={this.changeUsername.bind(this)}/>
                        <span className="help-block">{this.state.unameHelp}</span>
                    </div>
​
                    <div className="form-group input-text">
                        <label htmlFor="upwd">密碼</label>
                        <input type="password" className="form-control" name="password" id="upwd" ref="upwd" placeholder="密碼"
                               onChange={this.changePassword.bind(this)}/>
                        <span className="help-block">{this.state.upwdHelp}</span>
                    </div>
​
                    <div className="form-group">
                        <label htmlFor="chk" className="check">
                            <input type="checkbox" id="chk" checked={this.state.isRemember} onClick={this.handleCheckbox.bind(this)} />
                            <span>記住密碼</span>
                        </label>
                    </div>
​
                    <div className="form-group">
                        <button type="button" onClick={this.handleClick.bind(this,this.state.userName,this.state.userPassword)} className="btn btn-primary login-btn">登錄</button>
                    </div>
                </form>
​
            </div>
        )
    }
}
​
​
    /**************登錄(WXP)****************/
    .login-box{ width: 60%; background: #e0e8e0; margin: 100px auto; padding: 50px 70px; box-shadow: 5px 5px #ddd; border-radius: 5px; } ​ .login-title{ font-size: 30px; text-align: center; margin-bottom: 20px; font-weight: 600; } ​ .input-text>label{ display: inline-block; width: 15%; } ​ .input-text>input{ display: inline-block; width: 80%; } .check{ margin-left: 15%; width: 40% } .check>span{ margin-left: 3%; } .login-btn{ margin-left: 15%; width: 80%; font-size: 16px; } .help-block{ color: #e4393c; height: 20px; font-size: 12px; margin-left: 15%; }