Introduction
For form validation in React, you need to use rc-formthis library, which is a high-level form component of react
use
code show as below
import React from 'react'
import "../assets/css/modifyPassword.less"
import {
createForm } from 'rc-form';
import {
Input, Cell,Button,Toast } from 'zarm';//本代码实例使用了zarm组件库中的组件
function ModifyPassword(props) {
const {
getFieldProps, getFieldError } = props.form;
const navigate=useNavigate();
const confirm=async ()=>{
//字段验证
props.form.validateFields(async (error,value)=>{
if(!error){
if (value.newPass !=value.confirmPass) {
Toast.show('新密码输入不一致');
return
}
Toast.show("修改成功")
}else{
Toast.show("请填写完整信息")
}
})
}
return (
<div className='modifyPassword'>
<div className="content">
<Cell title="原密码">
<Input
clearable
type="password"
placeholder="请输入原密码"
{
...getFieldProps('oldPass', {
rules: [{
required: true }] })}
/>
</Cell>
<Cell title="新密码">
<Input
clearable
type="password"
placeholder="请输入新密码"
{
...getFieldProps('newPass', {
rules: [{
required: true }] })}
/>
</Cell>
<Cell title="确认密码">
<Input
clearable
type="password"
placeholder="请输入确认密码"
{
...getFieldProps('confirmPass', {
rules: [{
required: true }] })}
/>
</Cell>
<Button theme="primary" onClick={
confirm}>
提交
</Button>
</div>
</div>
)
}
export default createForm()(ModifyPassword)
The effect is as follows
illustrate
createForm
Through createForm()(ModifyPassword), a form object is mounted on the props of the component Form, and this props.form object has getFieldProps, validateFields and other methods, as shown in the figure below (print props.form)
getFieldProps
<input {
...getFieldProps(name, option)} />
name: string (input only name)
option: object
<form>
<input {
...getFieldProps('oldPass', {
rules: [{
required: true }] })} />//required：true此项为必填项
</form>
validateFields
Pass the field name validation (error) and get the field value (value.name)
const confirm=async ()=>{
//字段验证
props.form.validateFields((error,value)=>{
if(!error){
//字段验证通过
if (value.newPass !=value.confirmPass) {
Toast.show('新密码输入不一致');
return
}
Toast.show("修改成功")
}else{
Toast.show("请填写完整信息")
}
})
}
Reference article: https://www.jianshu.com/p/f3bdc2492d52