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 = this.errorClass.bind(this);
  }
  
  handleUserInput (e) {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({[name]: value}, () => { this.validateField(name, value)});
  }
  
  validateField(fieldName, value) {
    let fieldValidationErrors = this.state.formErrors;
    let emailValid = this.state.emailValid;
    let passwordValid = this.state.passwordValid;
                console.log("email valid: ", emailValid);
                console.log("password valid: ", passwordValid);
    switch(fieldName) {
      case 'email':
        //emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        emailValid = re.test(value);
        fieldValidationErrors.email = emailValid ? '' : ' is invalid';
        break;
      case 'password':
        passwordValid = value.length >= 6;
        fieldVali.........完整代码请登录后点击上方下载按钮下载查看