我想设置一个密码并将其限制为“密码必须包含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;