验证字符串长度并确保它包含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/是一个很好的地方尝试和尝试正则表达式模式，如果你去那条路线。