Question

如何为react js表单提供验证。

我已经采用了两个领域的形式。如果启用了两个字段，则只需启用保存按钮。

import React from 'react'
import { Button, Checkbox, Form } from 'semantic-ui-react'

const FormExampleForm = () => (
  <Form>
    <Form.Field>
      <label>First Name</label>
      <input placeholder='First Name' />
    </Form.Field>
    <Form.Field>
      <label>Last Name</label>
      <input placeholder='Last Name' />
    </Form.Field>
    <Form.Field>
      <Checkbox label='I agree to the Terms and Conditions' />
    </Form.Field>
    <Button type='submit'>Submit</Button>
  </Form>
)

export default FormExampleForm

Answer 1

在redux表单6.7中有一个名为pristine的简单属性，可用于执行此操作。但是，如果用户在至少一个输入字段中输入某个值，则提交按钮被激活。要做到这一点，你可能需要做这样的事情。

  render() {
    // const { handleSubmit } = this.props;
    const {handleSubmit, pristine, reset, submitting} = this.props
    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
        <div>
            <label>First Name</label>
            <div>
              <Field name="firstName" component="input" type="text" placeholder="First Name"/>
            </div>
        </div>
      <button type="submit" className="btn btn-primary" disabled={pristine || submitting}>Submit</button>
      </form>
    );
  }
}

但是如果你需要启用提交按钮，比如当用户在2个给定字段中输入值时，则会变得复杂。你需要做这样的事情。这是我的样本用例。表单有3个字段firstName，lastName和age。仅当用户在此处输入firstName和lastName输入字段的值时，才会激活提交按钮。请查看以下代码。

import React, { Component } from 'react';
import { Field, reduxForm, formValueSelector } from 'redux-form';
import { connect } from 'react-redux';

class UserNew extends Component {
  constructor(props) {
    super(props);
    this.isSubmitEnabled = this.isSubmitEnabled.bind(this);
  }


  onSubmit(values) {
    console.log(values);
  }

  isSubmitEnabled() {
   // Access field values here and validate them
   const firstName = this.props.firstNameValue;
   const lastName = this.props.lastNameValue;
   if(firstName && lastName){
      return true;
   }
   return false;
 }

  render() {
    const { handleSubmit } = this.props;
    const isEnabled = this.isSubmitEnabled();


    return (
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
      <div>
        <label>First Name</label>
        <div>
          <Field name="firstName" component="input" type="text" />
        </div>
      </div>
      <div>
        <label>Last Name</label>
        <div>
          <Field name="lastName" component="input" type="text" />
        </div>
      </div>
      <div>
        <label>Age</label>
        <div>
          <Field name="age" component="input" type="text" />
        </div>
      </div>
      <button type="submit" className="btn btn-primary" disabled={!isEnabled}>Submit</button>
      </form>
    );
  }
}


UserNew = reduxForm({
  form: 'UserNewForm'
})(
  UserNew
);

// Decorate with connect to read form values
const selector = formValueSelector('UserNewForm') // <-- same as form name
UserNew = connect(state => {
  const firstNameValue = selector(state, 'firstName')
  const lastNameValue = selector(state, 'lastName')
  return {
    firstNameValue,
    lastNameValue,
  }
})(UserNew)


export default UserNew;

要访问字段值，您需要在ReduxForms中使用formValueSelector。为此，您需要使用connect帮助程序将表单连接到redux商店。

希望这会有所帮助。快乐的编码！

Answer 2

您可以使用Redux-form作为上面代码中未使用的，因此您可以编写自定义JS验证代码。为此，您需要按照以下

在

中初始化状态

contructor(){
 this.state{
   first_name: null,
   last_name: null,
 }
}

更改每个输入元素onChange onChange={()=>this.setState({first_name: event.target.value})}
现在将onClick属性添加到<Button onClick={this.handleSubmit} />
在handleSubmit()内你可以通过组件的本地状态获取值并添加验证规则，如

if（this.state.first_name ==＆＃34;＆＃34;）{ console.log（＆＃34;输入名字＆＃34;） }

如何为react js表单提供验证

2 个答案: