如何设置或更改最小密码长度

时间:2019-07-22 18:55:47

标签: html reactjs material-ui

我想设置一个密码并将其限制为“密码必须包含40个十六进制字符”。将只允许使用十六进制字符的替代方法是什么?

道具

autoComplete:"new-password"
label:"Password"
margin:"normal"
maxLength:100
name:"meter_password"
onChange:bound bound _onChange()
pattern:"[A-Fa-f0-9]{40}"
required:true
select:false
style:{…}
tabIndex:107
type:"password"
value:""


class PasswordDisplayField extends React.PureComponent {
    constructor(props) {
        super(props);

        this.state = {
            showPassword: false
        };
    }

    _showPassword() {
        this.setState({
            showPassword: true
        });
    }

    _hidePassword() {
        this.setState({
            showPassword: false
        });
    }

    render() {
        return <div>
            <div style={{
                display: 'inline-block',
                lineHeight: '48px',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                width: 'calc(100% - 48px)'
                }}>

            {this.state.showPassword ? this.props.value : '********'}

            </div>
            <IconButton
                onMouseDown={this._showPassword.bind(this)}
                onMouseOut={this._hidePassword.bind(this)}
                onMouseUp={this._hidePassword.bind(this)}
                style={{float: 'right'}}
                title={this.props.tooltip}
                >
                <Icon>visibility</Icon>
            </IconButton>
        </div>;

        }


        }

        PasswordDisplayField.propTypes = {
            tooltip: PropTypes.string.isRequired,
            value: PropTypes.string.isRequired
        };


    export default PasswordDisplayField;

    class PasswordField extends React.PureComponent {
        constructor(props) {
            super(props);

            this.state = {
                showPassword: false
            };
        }

        componentWillMount() {
            this.showPassword = this.context.intl.formatMessage({id: 'Show.password'});
        }

        _showPassword() {
            this.setState({
                showPassword: true
            });
        }

        _hidePassword() {
            this.setState({
                showPassword: false
            });
        }

        render() {
            var {
                style,
                type, // NOSONAR Due to destructuring.
                ...rest
            } = this.props;

            return <div style={style}>
                   <TextField
                       // https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
                       autoComplete="new-password"
                       style={{width: 'calc(100% - 48px)'}}
                       type={this.state.showPassword ? 'text' : 'password'}{...rest}
                       margin="normal"
                       inputProps={{minLength:40}}
                       >
                    </TextField>
                </div>;
        }
    }

    PasswordField.contextTypes = {
        intl: intlShape.isRequired
    };

    PasswordField.propTypes = {
        label: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired,
        onChange: PropTypes.func.isRequired,
        value: PropTypes.string.isRequired
    };

    export default PasswordField;

0 个答案:

没有答案
相关问题