文字列の長さを検証し、React Reduxフォームに特定の文字が含まれていることを確認してください

Question

set_password.jsコンポーネントで作業すると、ユーザーはパスワードを設定できます。それはそれらが一致することを確認するために2回入力します。パスワードは、長さが少なくとも8文字、大文字が1文字、数字が1文字、特殊文字が1文字という条件を持つ必要があります。何も地面を壊すことはない。

私はこのスタッフサーバー側を検証する方法を知っていますが、ユーザーがサーバーレスポンスを待つ必要がないようにクライアント側を検証します。私はそれをする方法と苦労しています。

私はvalidate関数を持っており、フィールドから値を取り出して検証します。

function validate(values) { 
    const errors = {}; 

    if (!values.password1) { 
     errors.password1 = 'This field cannot be empty.' 
    } 
    if (!values.password2) { 
     errors.password2 = 'This field cannot be empty.' 
    } 
    if (values.password1.length < 8) { 
     errors.password1 = 'The password provided is not long enough.' 
    } 
    if (values.password2.length < 8) { 
     errors.password2 = 'The password provided is not long enough.' 
    } 
    return errors 
} 

これは私がこれまで持っている、と私はエラーCannot read property 'length' of undefinedを取得するので、私は明らかに間違っている地域では、このロジックを入れていますすべてです。

私はアクションに入れて、ユーザーがonSubmitの後にのみ検証されるようにするべきだと思っています。そう、これを達成するための正しい方法は何ですか、

onSubmit(values) { 
    this.props.setPassword(values, this.props.match.params); 
} 

---

export function setPassword({ password1, password2 }, { id, key }) { 
    return function(dispatch) { 
     if (password1.length < 8 && password2.length < 8) { 
      axios 
       .post(
        `${ROOT_URL}/api/auth/set_password/`, 
        { password1, password2, id, key } 
       ) 
       .then(response => { 
        console.log('Password changed') 
       }) 
       .catch(error => {   
        dispatch(authError(error.response.data.non_field_errors[0])); 
     }); 
     } 

    } 
} 

とにかく：私はそれはのようになります推測しますか？文字列の長さを確認し、少なくとも1つの大文字、特殊文字1つ、数字1つを確認しますか？

EDIT：

関連するフォームデータ：

// This renders errors regarding the form inputs 
    renderField(field) { 
     const { 
      label, 
      type, 
      name, 
      meta: { 
       touched, 
       error 
      } 
     } = field; 

     return (
      <div className='form-group'> 
       <label>{label}</label> 
       <input 
        className='form-control' 
        type={type} 
        placeholder={label} 
        {...field.input} 
       /> 
       <div className='text-danger'> 
        {touched ? error : ""} 
       </div> 
      </div> 
     ); 
    } 

    // The main body to be rendered 
    render() { 
     if (this.props.permitRender) { 
      const { handleSubmit } = this.props; 
      return (
       <div> 

        <h3>Set New Password</h3> 
        <p>Type your new password twice. </p> 
        <p>It must be a minimum of 8 characters in length and contain at least:</p> 
        <ol> 
         <li>One uppercase character</li> 
         <li>One special character</li> 
         <li>One number</li> 
        </ol> 

        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
         {this.renderAlert()} 
         <Field 
          label='Enter New Password' 
          name='password1' 
          type='password' 
          component={this.renderField} 
         /> 
         <Field 
          label='Confirm New Password' 
          name='password2' 
          type='password' 
          component={this.renderField} 
         /> 
         <button type="submit" className="btn btn-primary">Submit</button> 
        </form> 
       </div> 
      );    
     } else if (!this.props.permitRender) { 
      return ( 
       <div> { this.renderAlert() } </div> 
      ); 
     } 
    } 

Answer 1

今、あなたの検証if -statementsは多少間違って注文しています。とにかくパスワードの値のいずれかが設定されているとは思えません。
まず、検証したい文字列に対してヌルチェックを行い、それ以降は長さと文字のチェックを行うほうがよいでしょう。

ここにある文字の検証はおそらく1つ（またはそれ以上の、おそらくより簡単な）正規表現パターンを使用して行うことができます。

// null check 
if (!values.password1) { 
    errors.password1 = 'This field cannot be empty.' 
} 
// After null checking, check length 
else if (values.password1.length < 8) { 
    errors.password1 = 'The password provided is not long enough.' 
} 
// Check for capital letters 
else if (/([A-Z]+)/g.test(values.password1) { 
    errors.password1 = 'You don\'t have any capital letters in there yo' 
} 

// Same here as before, pretty much 
if (!values.password2) { 
    errors.password2 = 'This field cannot be empty.' 
} 
else if (values.password2.length < 8) { 
    errors.password2 = 'The password provided is not long enough.' 
} 

文が別々にそれぞれのヌルチェックを行うには場合にも、自分の中values.password1 && values.password1.length > 8ような何かを行うことができます。

は、そのルートに行くと正規表現パターンを試して試してみるのに適しています。