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"
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"
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" >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%;
}
以上是 react.js 表单验证-登录框 的全部内容， 来源链接： utcz.com/z/383952.html
