Ant UI 的表单校验


```React
import React from "react";
import { Card, Form, Input, Button, message, Icon, Checkbox } from "antd";
const FormItem = Form.Item; // 表单的单行
class FormLogin extends React.Component{handleSubmit = ()=>{let userInfo = this.props.form.getFieldsValue(); // 获取表单的所有属性this.props.form.validateFields((err,values)=>{if(!err){message.success(`${userInfo.userName}欢迎您 ，当前密码为：${userInfo.userPwd}`)}})}render(){const { getFieldDecorator } = this.props.form;return (<div><Card title="登录水平表单" style={{marginTop:10}}><Form style={{width:300}}><FormItem>{getFieldDecorator('userName',{initialValue:'',rules:[{required:true,message:'用户名不能为空'},{min:5,max:10,message:'长度不在范围内'},{pattern:new RegExp('^\\w+$','g'),message:'用户名必须为字母或者数字'}]})(<Input prefix={<Icon type="user"/>} placeholder="请输入用户名" />)}</FormItem><FormItem>{getFieldDecorator('userPwd', {initialValue: '',rules: []})(<Input prefix={<Icon type="lock" />} type="password" placeholder="请输入密码" />)}</FormItem><FormItem>{getFieldDecorator('remember', {valuePropName:'checked',initialValue: true})(<Checkbox>记住密码</Checkbox>)}<a href="#" style={{float:'right'}}>忘记密码</a></FormItem><FormItem><Button type="primary" onClick={this.handleSubmit}>登录</Button></FormItem></Form></Card></div>);}
}// 使用getFieldDecorator ，因为是antd的form的属性，所以需要导出form组件，使用这句话
export default Form.create()(FormLogin);
![login](https://img-blog.csdnimg.cn/20200703152453479.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MjQxOTM0,size_16,color_FFFFFF,t_70)

Ant UI 的表单校验相关推荐

Element UI进行表单校验的时候，输入正确内容后，还有提示问题
问题:表单中输入正确的内容后,还提示请输入内容部分代码如下: // 表单 <el-dialog title="添加用户" :visible.sync="dialo ...
element表单校验输入框手动清空时出现XXX is required提示
使用element UI el-form表单校验时,当输入框手动清空内容时会出现XXX( Form-Item 的 prop 属性设置的校验字段名) is required提示,输入框失去焦点之后,又恢 ...
基于Ant Design和jQuery UI的表单设计器
基于Ant Design 和jQuery UI 的表单设计器 GitHub 地址概念 Comonent 组件 Layout 布局,一种特殊的Component Component Editor 组件 ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
element ui表单校验prop的链式写法----源码分析
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width=& ...
重置表单验证清除表单校验信息
重置表单验证清除表单校验信息提交表单验证的时间经常遇见的一个问题再次打开时表单验证依旧存在,这种就很烦,用户体验有点差, 在使用Vant或Element UI框架时经常会遇到,再次打开表单时,原 ...
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
android 自定义表单,Android实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
JEECG 3.7.8 新版表单校验提示风格使用升级方法（validform 新风格漂亮，布局简单)
JEECG 表单校验新提示风格使用讲解&升级方法 (validform 新风格漂亮,布局简单) JEECG 表单校验采用的是validform,默认的校验提示需要占用页面布局,提示效果较传统. ...

Ant UI 的表单校验

Ant UI 的表单校验相关推荐

最新文章

热门文章