记录一下 React 项目中用 AntD 表单验证(用户名、密码确认)

1,570 阅读1分钟

1、用户名校验

  • 关于自定义校验方法:antd官网提供了方法validator,函数由3个参数组成,rule是规则,value是你输入的值,callback是个回调函数

image.png

  • 在 rules 里新增一个 validator,对应 validateUsername 函数

image.png

  • 稍微加工一下

image.png

  • 实现了用户名只能输入字母、数字、下划线作为用户名,并且长度只能在4~10个字符之间。

2、密码二次确认校验(与页面其他元素进行协同判断)

  • 在 confirmPassword 的 rules 直接写一个函数 validateConfirm

image.png

  • 这个函数返回一个新的 validator 对象(记得加括号,不加的话,箭头函数会把后面理解成函数体)

image.png