驗證字符串長度並確保它包含React Redux表單中的某些字符

Question

使用您猜對的set_password.js組件，可讓用戶設置其密碼。它讓他們輸入兩次以確保它們匹配。密碼應該具有至少8個字符長度，一個大寫字母，一個數字，一個特殊字符的標準。沒有什麼突破。

我知道如何驗證這個東西的服務器端，但寧願驗證它的客戶端，所以用戶不必等待服務器響應。我正在努力如何去做。

我有一個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])); 
     }); 
     } 

    } 
} 

不管怎樣，那麼什麼是實現這一目標的正確方法是什麼？檢查字符串的長度，是否至少有一個大寫字母，即有一個特殊字符和一個數字？

編輯：

相關表格數據：

// 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排序有點錯誤。我不認爲你可以任意設定任何密碼值。
首先對要驗證的字符串進行空值檢查可能會更好，並且只有在檢查完字符之後再進行長度和字符檢查。

驗證哪些字符應該在那裏可以通過使用一個（或更多，這可能更容易）正則表達式模式來完成。

// 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在你的if語句做每個空檢查seperately。

https://regex101.com/是一個很好的地方嘗試和嘗試正則表達式模式，如果你去那條路線。