重置密码 andt表单验证

import React from "react";

import {Form, Icon, Input} from "antd";

 

function PasswordForm(props) {

const { getFieldDecorator,getFieldValue } = props.form;

 

// 密码验证

const passwordValidator = (rule, value, callback) => {

if (value && value.length<6) {

callback('密码需大于等于6位数!')

}

callback();

}

const passwordSedValidator = (rule, value, callback) => {

if (value && value !== getFieldValue('password')) {

callback('两次输入不一致!')

}

callback();

}

 

return <Form >

<Form.Item>

{getFieldDecorator('password', {

rules: [{ required: true, message: '请输入密码' },{validator:passwordValidator}],

})(

<Input

prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}

type="password"

placeholder="请输入密码"

/>,

)}

</Form.Item>

<Form.Item>

{getFieldDecorator('passwordSed', {

rules: [{ required: true, message: '请确认密码' },{validator: passwordSedValidator}],

})(

<Input

prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}

type="password"

placeholder="请确认密码"

/>,

)}

</Form.Item>

</Form>

}

 

export default Form.create()(PasswordForm);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章