Ant UI 的表单校验
生活随笔
收集整理的這篇文章主要介紹了
Ant UI 的表单校验
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
```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:'長度不在范圍內(nèi)'},{pattern:new RegExp('^\\w+$','g'),message:'用戶名必須為字母或者數(shù)字'}]})(<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的屬性，所以需要導(dǎo)出form組件，使用這句話
export default Form.create()(FormLogin);
總結(jié)
以上是生活随笔為你收集整理的Ant UI 的表单校验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ContestHunter #26 B
- 下一篇： re、词云