react实现表单输入字段验证代码-html代码-BFW代码库

react实现表单输入字段验证代码

代码语言：html

所属分类：验证

代码描述：react实现表单输入字段验证代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
  
<style>
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.demoForm {
        width: 500px;
        margin: auto;
}

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>


</head>

<body >
  <div id="app"></app>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.0.14.3.js"></script>
<script type="text/babel" >
class Application extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      signIn: false
    }
    this.handler = this.handler.bind(this);
  }
  
  handler() {
    this.setState({signIn: true});
  }
  
  render() {
    return <div className="App">
        <div className="App-header">
          <h2>React Form Validation Demo</h2>
        </div>
        {(this.state.signIn ? <User /> : <Form handler={this.handler}/>)}
      </div>;
  }
}

class Form extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
      formErrors: {email: '', password: '', error: ''},
      emailValid: false,
      passwordValid: false,
      formValid: false
    }
    this.handleUserInput = this.handleUserInput.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleClearForm = this.handleClearForm.bind(this);
    this.errorClass = thi.........完整代码请登录后点击上方下载按钮下载查看