//ͷ頭部
class Header extends React.Component {
goBack (){
    window.history.go(-1);
}
    render() {
         var styleDiv = {
            width:'100%',
            height:'70px',
           lineHeight:'70px'
        }
        var styleImg = {
           marginLeft:'10px',
           marginRight:'10px'
        }

        return (
            <div style={styleDiv}>
                <a href="#" onClick={()=>this.goBack()} >
                    <img src="./images/back.png" style={styleImg}/>
                </a>
            </div>
        )
    }
}
 //中間表單
class Content extends React.Component{

    constructor(props){
        super(props);
        this.state = {
        telError:null,
        passwordError:null,
        imageShow:true
        }

    }
    //手機號判斷
    telCheck(event){
        this.tel=event.target.value
        console.log(this.tel)
        var reg=/^1[34578]\d{9}$/;
        if(reg.test(this.tel)==false){
            this.setState({
               telError:"請輸入正確的手機號"
            })
        }else{
            this.setState({
                telError:""
            })
        }

    }
    //密碼判斷
    passwordCheck(event){
        this.password=event.target.value
        var reg=/^\w{6,20}$/;
        if(reg.test(this.password)==false){
            this.setState({
                passwordError:"密碼為6-20位數字或字母或下劃線!"
            })
        }else{
            this.setState({
                passwordError:""
            })
            }

    }
    //是否記住密碼
    isRemember(){
        this.setState({
            imageShow:!this.state.imageShow
        })
    }
render () {
    var imageSrc=this.state.imageShow?"./images/unSelected.png":"./images/selected.png"
    var headImg={
        marginTop:"42px",
        marginBottom:"44px",
        position:'relative',
        left:"50%",
        marginLeft:"-56px"
        //textAlign:"center"不識別
    }
    var ul={
        listStyle:"none",
        margin:"0",
        padding:"0",
        display:"block",
        paddingLeft:"50px",
        paddingRight:"50px"
    }
    var liAll={
        margin:"0 auto",
        padding:"0"


    }
    var userTel={
        margin:"0 auto",
        padding:"0",
        display:'block',
        height:"41px",
        width:"286px",
        borderBottom:"1px solid #989898",
        lineHeight:"52px",
        paddingTop:"11px"
    }
    var userImg={
        diaplay:"inline-block",
        width:"30px",
        marginRight:"6px"
    }
    var userSpan={
        display:"inline-block",
        border:"1px solid #989898",
        height:"20px"
    }
    var telInput={
        margin:"0",
        padding:"0",
        display:"inline-block",
        height:"20px",
        marginBottom:"12px",
        marginLeft:"12px",
        outLine:"none",
        border:"0"
    }
    var telPrompt={
        color:"red",
        fontSize:"18px"
    }
    var unSelected={
        display:"inline-block",
        width:"20px",
        marginTop:"14px",
        marginRight:"4px"
    }
    var rememberLi={
        display:"block",
        height:"48px",
        lineHeight:"48px",
        clear:"both",
        margin:"0 auto"
    }
    var rememberI={
        fontStyle:"normal",
        fontSize:"11px",
        color:"#3dbf8e",
        marginLeft:"4px"

    }
    var forgetI={
        float:"right",
        fontStyle:"normal",
        fontSize:"11px",
        color:"#3dbf8e",
        marginBottom:"23px"

    }
    var login={
        border:"none",
        width:"100%",
        height:"42px",
        backgroundColor:"#F55D5D",
        color:"#fff",
        fontSize:"18px"
    }
    return (
        <div>
            <img src="./images/headImg.png" alt="" style={headImg}/>
            <ul style={ul}>
                <li style={userTel}>
                    <img src="./images/username.png" alt="" style={userImg}/>
                    <span style={userSpan}></span>
                    <input type="text" style={telInput} placeholder="請輸入手機號" onBlur={(event)=>this.telCheck(event)} />
                </li>
                <li style={liAll}>
                    <span style={telPrompt}>{this.state.telError}</span>
                </li>
                <li style={userTel}>
                    <img src="./images/password.png" alt="" style={userImg}/>
                    <span style={userSpan}></span>
                    <input type="password" style={telInput} placeholder="請輸入密碼" onBlur={(event)=>this.passwordCheck(event)}/></li>
                <li style={liAll}>
                    <span style={telPrompt}>{this.state.passwordError}</span>
                </li>
                <li style={rememberLi}>
                    <img src={imageSrc} a style={unSelected} onClick={()=>this.isRemember()}/>
                    <a href="#" style={rememberI}>記住手機號</a><a href="#" style={forgetI}>忘記密碼</a>
                </li>
                <li style={liAll}>
                    <button style={login}>登入</button>
                </li>
            </ul>
        </div>
    )
}
 }
 //底部
class Footer extends React.Component{
render(){
    var register={
        display:"block",
        fontSize:"13px",
        color:"#8b8b8b",
        width:"80px",
        height:"25px",
        margin:"0 auto",
        border:"1px solid #8b8b8b",
        textDecoration:"none",
        marginTop:"50px",
        textAlign:"center",
        lineHeight:"25px"

    }
    return(
    <a href="#" style={register}>快速註冊</a>
    )
}
}
class All extends React.Component{
  render () {
      return (
          <div>
              <Header></Header>
              <Content></Content>
              <Footer></Footer>
          </div>
      )
  }
}

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

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
	<title>Demo1</title>
	</head>
  	<body>
	    <div id="container"></div>
	    <script src="./build/react.js"></script>
	    <script src="./build/react-dom.js"></script>
	    <script src="./lib/browser.min.js"></script>
	    <script type="text/babel" src="./js/login.js"></script>
	</body>
</html>