数据验证后提交表单

Posted 2023-02-22

【中文标题】数据验证后提交表单

【英文标题】：Submit form after data validation

【发布时间】：2018-11-08 01:21:30

【问题描述】：

我使用 React 和 Redux 创建了带有验证的表单。 验证条件：

数据应在输入时进行验证 提交前需再次验证数据 所有数据所有字段均为必填且数据有效

当用户开始输入数据时，我检查数据并在输入时使用调度将它们发送到商店。 当用户首先单击“提交”按钮时，我会检查数据是否有价值并将其状态发送到商店。

问题：

如果提交时所有数据都具有有效值，是否需要我再次将数据发送到商店？

我的操作./actions/index.js：

export const changeValue = (field, value, isValid) => (
type: "CHANGE_VALUE",
  value, isValid, field
)

我的减速器 ./reducers/form.js :

const form = (state=
 firstName: isValid: true, value: '',
 mail:  isValid: true, value: ''
 , action) => 
  switch (action.type) 
    case 'CHANGE_VALUE':
      state[action.field].isValid = action.isValid
      state[action.field].value = action.value
      const user = Object.assign(, state)
      return user
    default:
      return state
  

export default form

我的表单容器 ./containers/Form.js ::

import React from 'react'
import  connect  from 'react-redux'
import  changeValue  from '../actions'

const hasOnlyLetters = value => value.match(/^[a-zA-Z]+$/)
const re  = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]2,4$/i
const hasEmail = value => value.match(re)

const Form = ( dispatch, inputs ) => 

  // Check the data at the time of the data input
  const changeHandler = (isValid, field, e) => 
    const  value  = e.target
    if (isValid(value))
      dispatch(changeValue(field, value, true))
     else 
      dispatch(changeValue(field, value, false))
    
  

  // Check the data before submission
  const handleSubmit = (e) => 
    e.preventDefault()
    if (!inputs.firstName.value) 
      dispatch(changeValue('firstName', inputs.firstName.value, false))
    
    if (!inputs.mail.value) 
      dispatch(changeValue('mail', inputs.lastName.value, false))
    
    if(!inputs.firstName.isValid || !inputs.mail.isValid) 
      return alert('error')
     else 
     // Send the data to the store again?
      return alert('success')
      
  


  const error = (field, type) => 
    if (!field.value && !field.isValid) 
      return <span>Field is required</span>
     else if (field.value && !field.isValid && type === "text") 
      return <span>Should contain only letters</span>
     else if (field.value && !field.isValid && type === "mail") 
      return <span>Value should be a valid email</span>
     else
      null
    
  

  return (
    <div>
      <form onSubmit=handleSubmit>
        <div>
        <label>First name:</label>
        <input type="text" value=inputs.firstName.value onChange=changeHandler.bind(null, hasOnlyLetters, 'firstName')/>
         error(inputs.firstName, "text") 
        </div>
         <div>
        <label>Email:</label>
        <input type="mail" value=inputs.mail.value onChange=changeHandler.bind(null, hasEmail, 'mail')/>
         error(inputs.mail, "mail") 
        </div>
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )



function mapStateToProps(state) 
  return  inputs: state.form 

export default connect(mapStateToProps)(Form)

【问题讨论】：

为什么您认为应该“再次将数据发送到存储区”？我猜您可能会将其发送/发布到后端（最终会更新商店）。

我不知道你在问什么。您可以根据需要多次发送数据，然后将其合并。如果您想防止重复提交，只需在单击并验证数据后禁用提交按钮。

提示：我建议在调度程序中编写状态更新，如下所示：return ...state, [action.field]: value: action.value, isValid: action.isValid。这样你就不需要user 并且状态保持不变（不可变）。

我不明白你为什么返回用户。您将用户分配给状态而不是状态分配给用户。

【参考方案1】：

我建议您首先在 state 中设置值并执行验证。在组件中验证它们后，您可以在商店中设置正确的值。

`export default class Form extends React.Component

     constructor(props)
         super(props);
         this.state=
             name:'';
             age:''
         
     

     handleSubmit=()=>
         if(this.state.name==='')
             perform validation
         
         else if(this.state.name==='')

         //other validation(s)
         else 
         
             //set data in store only when the fields are correct..
         
     

     render()
         return (<div>
             <input type="text" onChange=(event)=> 
                 this.setState(name:event.target.value) />
             <input type="number" onChange=(event)=> 
                 this.setState(age:event.target.value) />
             <button onClick=this.handleSubmit>Submit</button>
        </div>)
     
 `

这将帮助您在商店中只拥有经过验证的数据。