J'ai besoin d'aide, comment pourrais-je correspondre au mot de passe dans react js. J'ai utilisé ant design le premier mot de passe fonctionne, mais pour un mot de passe conforme, je mets une déclaration qui ne fonctionne pas, comment puis-je le faire
handlePasswordChange = event => {
this.setState({
password: event.target.value,
});
};
handleConfirmPassword = event => {
if (event.handleConfirmPassword !== event.handlePasswordChange) {
message.error('error');
}
};
ce sont amusant et ci-dessous est la conception de la fourmi
<FormItem {...styles.formItemLayout} label="Password">
{getFieldDecorator('Password', {
rules: [{ required: true, message: 'Password is Required!' }],
})(
<Input
onChange={this.handlePasswordChange}
name="password"
type="password"
value={password}
style={styles.margin}
/>,
)}
</FormItem>
<FormItem {...styles.formItemLayout} label="Confirm Password">
{getFieldDecorator('Confirm Password', {
rules: [{ required: true, message: 'Confirm your Password!' }],
})(
<Input
name="password"
type="password"
style={styles.margin}
onChange={this.handleConfirmPassword}
/>,
)}
</FormItem>
En supposant que votre mot de passe et confirmPassword soient en état.
this.state = {
password: '',
confirmPassword: ''
}
handleSubmit = () => {
const { password, confirmPassword } = this.state;
// perform all neccassary validations
if (password !== confirmPassword) {
alert("Passwords don't match");
} else {
// make API call
}
}
Essaye ça:
handleConfirmPassword = (event) => {
if (event.target.value !== this.state.password) {
message.error('error');
}
}
Vous pouvez également définir votre état comme suit:
state = {
password: '',
confirmPassword: ''
}
Et ensuite, vous pouvez vérifier la correspondance sur la handleConfirmPassword
et sur le soumettre.
handleConfirmPassword = (event) => {
if (event.target.value !== this.state.password) {
message.error('error');
this.setState({confirmPassword: event.target.value})
}
}
Et puis, un gestionnaire de soumission au formulaire:
handleSubmit = (event) => {
if(this.state.password !== this.state.confirmPassword){
message.error("The passwords doesn't match")
return false; // The form won't submit
}
else return true; // The form will submit
}
Je pensais juste que je mettrais aussi mes deux sous :)
import React, {Component} from 'react';
class Form extends Component {
constructor(props) {
super(props)
this.state = {
password: {
new: null,
match: null,
confirmed: null,
},
}
this._handleNewPassword = this._handleNewPassword.bind(this)
this._handlePasswordMatch = this._handlePasswordMatch.bind(this)
this._handleFormSubmission = this._handleFormSubmission.bind(this)
this._handleConfirmedPassword = this._handleConfirmedPassword.bind(this)
}
_handleFormSubmission({ currentTarget }) {
// Check the password
// match on form submission
this._checkPasswordForMatch().then(
({ success }) => {
if (success) {
// post data to API
}
}
)
}
// handle storing the
// new password in state
_handleNewPassword(value) {
let state = Object.assign({}, this.state)
state.password.new = value
this.setState(state)
}
// handle storing the
// confirmed password in state
_handleConfirmedPassword(value) {
if (value === this.state.password.new) {
let state = Object.assign({}, this.state)
state.password.confirmed = value;
this.setState(state);
}
}
// handle storing the
// confirmed password in state
async _handlePasswordMatch() {
let { password } = this.state;
let state = Object.assign({}, this.state);
if (password.new === password.confirmed) {
state.password.match = true
} else {
state.password.match = false
}
await this.setState(state)
return {
success: state.password.match
}
}
render() {
return (
<div
method='POST'
onFormSubmit={this._handleFormSubmission}>
<input
type='password'
name='new-password'
onChange={this._handleNewPassword}
pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}' />
<input
type='password'
name='confirm-password'
onChange={this._handleConfirmedPassword}
pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}' />
<button type='submit'>Submit</button>
</div>
);
}
}
export default Form;
Vous pouvez utiliser le rappel de vérification de mot de passe:
checkPassword = (rule, value, callback) => {
if (value && value !== form.getFieldValue('Password')) {
callback("The passwords don't match");
} else {
callback();
}
};
Thru validator rule:
<FormItem {...styles.formItemLayout} label="Password">
{getFieldDecorator('Password', {
rules: [{ required: true, message: 'Password is Required!' }],
})(
<Input
name="password"
type="password"
value={password}
style={styles.margin}
/>,
)}
</FormItem>
<FormItem {...styles.formItemLayout} label="Confirm Password">
{getFieldDecorator('ConfirmPassword', {
rules: [
{ required: true, message: 'Confirm your Password!' },
{ validator: this.checkPassword }
],
})(
<Input
name="password"
type="password"
style={styles.margin}
/>,
)}
</FormItem>