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 表单校验的更多相关文章

  1. React-Antd4的Form表单校验

    之前很少用react做项目,最近入职新公司,用的react,在自己的摸索过程中,慢慢会记录一些使用方法.今天简单记录一下使用antd 4.0版本的Form表单校验,直接代码. 需要购买阿里云产品和服务 ...

  2. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  3. AngularJS 1.2.x 学习笔记(表单校验篇)

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  4. angularJs表单校验(超级详细!!!)

    html代码 <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> < ...

  5. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  6. 关于jQuery表单校验的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. php 表单校验函数库(判断email格式是否正确、http地址是否合法有效、手机号码是否合法)

    /** * 表单校验函数库 */ /** * 判断email格式是否正确 * @param $email */ function is_email($email) { return strlen($e ...

  8. 关于jQuery表单校验

    <style> .red{border: 1px solid red;} .wrong-tip{color: red;} </style> <form action=&q ...

  9. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

随机推荐

  1. Linux下启动、停止xampp命令

    启动xampp: /opt/lampp/./lampp start 停止xampp: /opt/lampp/./lampp stop 卸载xampp: rm -rf /opt/lampp

  2. python面试题Python2.x和Python3.x的区别

    所属网站分类: 面试经典 > python 作者:外星人入侵 原文链接: http://www.pythonheidong.com/blog/article/22/ 来源:python黑洞网 w ...

  3. [Poj3133]Manhattan Wiring (插头DP)

    Description 题目大意:给你个N x M(1≤N, M≤9)的矩阵,0表示空地,1表示墙壁,2和3表示两对关键点.现在要求在两对关键点之间建立两条路径,其中两条路径不可相交或者自交(就是重复 ...

  4. HDU 3368 Reversi

    http://acm.hdu.edu.cn/showproblem.php?pid=3368 题意:模拟黑白棋,下一步黑手最大可以转化多少个白旗 分析:暴力 原先的思路是找到D然后遍历其八个方向,直到 ...

  5. 【bzoj3339】Rmq Problem

    [bzoj3339]Rmq Problem   Description Input Output Sample Input 7 50 2 1 0 1 3 21 32 31 43 62 7 Sample ...

  6. 关于mybatis 一级缓存引发的问题

    场景: 由于在一个方法中存在多个不同业务操作 private void insertOrUpdateField(CompanyReport entity) { //计算并数据 calcReportDa ...

  7. easyui-combogrid匹配查询

    用到easyui-combogrid,数据比较少的情况,可以一页就显示完毕,然后直接下拉选择.但是对于数据量比较大的情况,一页显示全部显然不合适,好在从easyui-combogrid的数据加载方式可 ...

  8. Couchbase I

    Couchbase第一印象(架构特性) 面向文档 保存的字节流总有一个 DOCUMENT ID(Object_ID) 高并发性,高灵活性,高拓展性,容错性好 面向文档的集群存储系统 每个文档用一个唯一 ...

  9. IOS开发学习笔记020-练习总结

    自己做了一遍,现在再复习一下,总结一下. 最终效果如下         1.新建一个工程Single View Application 总体如下 不过要关闭自动布局功能 这是按下设置按钮显示的界面默认 ...

  10. LeetCode668马在棋盘上的概率

    已知一个 NxN 的国际象棋棋盘,棋盘的行号和列号都是从 0 开始.即最左上角的格子记为 (0, 0),最右下角的记为 (N-1, N-1). 现有一个 “马”(也译作 “骑士”)位于 (r, c)  ...