react实现登录页面demo

demo,react 专栏收录该内容
4 篇文章 0 订阅

//ͷ头部
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")
 )

html

<!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>


  • 2
    点赞
  • 1
    评论
  • 10
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

gxf_style

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值