import React, { Component, PropTypes } from 'react';
import { Row, Col, Button, Image, Glyphicon, FormGroup, FormControl, HelpBlock, ControlLabel } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";

export default class Login extends Component {
  state = {
    account: '',
    password: '',
  };

  render() {
    const { account, password } = this.state;
    return (
      <div>
        <h1>登录</h1>
        <hr className="colorgraph" />
        <Row>
          <Col xs={12} sm={4} smOffset={4}>
            <Image
							src="/img/logo.jpg"
							responsive
							style={{ margin: 'auto', marginBottom: 20 }}
						/>
						<FormGroup>
							<FormControl
								type="text"
								value={account}
								placeholder="用户名"
								bsStyle={this.validateState()}
								bsSize="large"
								onChange={this.handleAccountChange}
							/>
						</FormGroup>
						<FormGroup>
							<FormControl
								type="password"
								value={password}
								placeholder="密码"
								bsSize="large"
								onChange={this.handlePasswordChange}
							/>
						</FormGroup>
						<Button
							disabled={!this.validateState()}
							onClick={this.handleFormSubmit.bind(this)}
							bsStyle="primary"
							block
						>
						登陆
						</Button>
          </Col>
        </Row>
      </div>
    );
  }

  handleAccountChange = (e) => {
    this.setState({
      account: e.target.value,
    });
  }

  handlePasswordChange = (e) => {
    this.setState({
      password: e.target.value,
    });
  }

  handleFormSubmit = (e) => {

    e.preventDefault();
  }

	validateState() {
		let length = this.state.account.length;
		let reg = /^(13|14|15|17|18)[0-9]{9}$/;

		if (length > 0 && reg.test(this.state.account)) {
			return 'success';
		} else if ( length > 0 && !reg.test(this.state.account)) {
			return 'warning';
		}
	}
}

import React, { Component, PropTypes } from 'react';
import { Row, Col, Button, Image, Glyphicon, FormGroup, FormControl, HelpBlock, ControlLabel } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";

export default class Login extends Component {
  state = {
    account: '',
    password: '',
  };

  render() {
    const { account, password } = this.state;
    return (
      <div>
        <h1>登录</h1>
        <hr className="colorgraph" />
        <Row>
          <Col xs={12} sm={4} smOffset={4}>
            <Image
							src="/img/logo.jpg"
							responsive
							style={{ margin: 'auto', marginBottom: 20 }}
						/>
						<FormGroup>
							<FormControl
								type="text"
								value={account}
								placeholder="用户名"
								bsSize="large"
								onChange={this.handleAccountChange}
							/>
							<HelpBlock>
								<p><Glyphicon glyph="question-sign"/>开发账号密码为test</p>
							</HelpBlock>
						</FormGroup>
						<FormGroup>
							<FormControl
								type="password"
								value={password}
								placeholder="密码"
								bsSize="large"
								onChange={this.handlePasswordChange}
							/>
						</FormGroup>
						<Button
							onClick={this.handleFormSubmit.bind(this)}
							bsStyle="primary"
							block
						>
						登陆
						</Button>
          </Col>
        </Row>
      </div>
    );
  }

  handleAccountChange = (e) => {
    this.setState({
      account: e.target.value,
    });
  }

  handlePasswordChange = (e) => {
    this.setState({
      password: e.target.value,
    });
  }

  handleFormSubmit = (e) => {
    e.preventDefault();
  }
}

Add hint for dev account