react dva 表单校验
import React,{ Component } from 'react';
import { connect } from 'dva';
import { WhiteSpace,NavBar ,List, InputItem ,Button,WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
import * as UtilAPI from '../../utils/utils.js';
import * as FormAPI from '../../utils/form.js';
import styles from './Login.less';
const rules = {
name: [{ required:true, message:"请输入手机号码" },{ pattern: /^1[3|5|7|8|9][0-9]\d{8}$/, message: "手机号码格式不正确"}],
code:[{required:true,message:"条形码不能为空"}],
msg:[{required:true,message:'短信验证码不能为空'}]
};
class Login extends Component {
constructor(props){
super(props);
this.getFieldProps = this.props.form.getFieldProps;
this.saveBaseInfo = this.saveBaseInfo.bind(this);
this.handleScanInput =this.handleScanInput.bind(this);
}
handleScanInput(){
//调微信sdk接口
}
saveBaseInfo(){
const ruleFields = FormAPI.getRuleFields(rules);
console.log(ruleFields);
const form = this.props.form;
this.props.form.validateFields(ruleFields,(error,value)=>{
let flag = false;
for(var key in error){
if(error[key].errors.length > 0 ){
UtilAPI.Toasting({type:"info", msg: error[key].errors[0].message});
flag = true;
return;
}
}
if(!flag){
let formdata = FormAPI.getFormData(form.getFieldsValue());
this.props.dispatch({
type:'login/saveItem',
payload:{
itemType:"baseinfo",
itemData:{
baseinfo:{
...formdata
}
}
}
})
}
})
}
render(){
return(
<div className={styles.main}>
<NavBar className="top-nav-bar">登录{this.props.token}</NavBar>
<WhiteSpace />
<WingBlank>
<List>
{<InputItem clear placeholder="手机号码" {...this.getFieldProps('name', { initialValue: this.props.baseinfo.name,rules: rules["name"]})} className="item-required">手机号码</InputItem>}
</List>
<WhiteSpace />
<List>
{<InputItem clear placeholder="扫描条形码" {...this.getFieldProps('code',{initialValue:this.props.baseinfo.code,rules:rules["code"]})} className="item-required" onClick={this.handleScanInput}>扫描条形码</InputItem>}
</List>
<WhiteSpace />
<List>
{<InputItem clear placeholder="短信验证码" {...this.getFieldProps('msg',{initialValue:this.props.baseinfo.msg,rules:rules["msg"]})} className="item-required" >短信验证码</InputItem>}
</List>
<WhiteSpace />
<Button type="primary">获取短信验证码</Button>
<WhiteSpace />
<Button type="primary" onClick={ this.saveBaseInfo }>登录</Button>
</WingBlank>
</div>
);
}
}
function mapStateToProps(state){
const { baseinfo,token } = state.login || {};
return {
baseinfo : baseinfo || {},
token : token
};
}
export default connect(mapStateToProps)(createForm()(Login));
react dva 表单校验的更多相关文章
- React-Antd4的Form表单校验
之前很少用react做项目,最近入职新公司,用的react,在自己的摸索过程中,慢慢会记录一些使用方法.今天简单记录一下使用antd 4.0版本的Form表单校验,直接代码. 需要购买阿里云产品和服务 ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- AngularJS 1.2.x 学习笔记(表单校验篇)
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- angularJs表单校验(超级详细!!!)
html代码 <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> < ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- 关于jQuery表单校验的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- php 表单校验函数库(判断email格式是否正确、http地址是否合法有效、手机号码是否合法)
/** * 表单校验函数库 */ /** * 判断email格式是否正确 * @param $email */ function is_email($email) { return strlen($e ...
- 关于jQuery表单校验
<style> .red{border: 1px solid red;} .wrong-tip{color: red;} </style> <form action=&q ...
- jQuery.validate表单校验+bootstrap
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
随机推荐
- 如何查看连接到手机热点的ip地址
因为最近玩树莓派,需要手机做热点,然后用树莓派连接到这个热点上,苦于不知道树莓派被分配了什么样的ip地址,经过一番探索,我发现了两种办法, 安装一个 android terminal( 安卓命令行), ...
- 非负随机变量X满足:(1-F(x)) 在 (0,+∞)积分为= E[X]
机器学习作业的第一题最后一问卡住了,要证明 非负随机变量X满足 1 - F(X) 在 (0,+∞)上的积分是E(X); 关键的地方是积分换序,看原来的答案真的很难理解,画个图一下就懂了,码个链接,便 ...
- java设计模式1--单例模式
1:单例模式简介 单例模式是一种常用的软件设计模式,它确保某个类只有一个实例,而且自行实例化并向整个系统提供唯一的实例.总而言之就是在系统中只会存在一个对象,其中的数据是共享的 特点: 单例类只能有一 ...
- windows_Bat_Scripts查看系统IP-更改regedit-更新系统补丁
1.1 脚本名称 Update_patch.bat 1.2 脚本代码 @echo off :menu cls mode con cols=48 lines=27 & color 0 ...
- python3 练习题100例 (十三)
题目十三:将一个正整数分解质因数.例如:输入60,打印出60=2*2*3*5. #!/usr/bin/env python3 # -*- coding: utf-8 -*- ""& ...
- 下载速度更加快的 SourceForge 镜像
http://www.mirrorservice.org/sites/download.sourceforge.net/pub/sourceforge/是 University of Kent的镜像, ...
- A1082 Read Number in Chinese (25)(25 分)
A1082 Read Number in Chinese (25)(25 分) Given an integer with no more than 9 digits, you are suppose ...
- UVA 10859 Placing Lamppost 树形DP+二目标最优解的求解方案
题意:给定一个无向,无环,无多重边,要求找出最少的若干点,使得,每条边之中至少有一个点上有街灯.在满足上述条件的时候将还需要满足让两个点被选择的边的数量尽量多. 题解: 对于如何求解最小的节点数目这点 ...
- python协程--yield和yield from
字典为动词“to yield”给出了两个释义:产出和让步.对于 Python 生成器中的 yield 来说,这两个含义都成立.yield item 这行代码会产出一个值,提供给 next(...) 的 ...
- JSP自定义tag控件标签
JSP支持自定tag的方法,那就是直接讲JSP代码保存成*.tag或者*.tagx的标签定义文件.tag和tagx文件不仅支持经典jsp代码,各种标签模版代码,还支持xml样式的jsp指令代码. 按照 ...