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. sendmail安装与配置

    一.安装sendmail与mail 1.安装sendmail:  1) centos下可以安装命令:yum -y install sendmail 2) 安装完后启动sendmail命令:servic ...

  2. 十六、MySQL LIKE 子句

    MySQL LIKE 子句 我们知道在 MySQL 中使用 SQL SELECT 命令来读取数据, 同时我们可以在 SELECT 语句中使用 WHERE 子句来获取指定的记录. WHERE 子句中可以 ...

  3. goaccess实现实时监控

    一.实现后台实时监控 goaccess -p /usr/local/etc/goaccess/goaccess.conf /var/log/nginx/access.log -a -o /usr/sh ...

  4. centos7上mysql8.0rpm方式安装

    首先是下载图解 1.首先卸载centos7中自带的mariadb rpm -qa|grep mariadb //查询出来已安装的mariadb rpm -e --nodeps 文件名 //卸载mari ...

  5. 获取PHP页面的当前文件名(包括后缀名)

    // $curPhp = substr($_SERVER['PHP_SELF'],strripos($_SERVER['PHP_SELF'],'/')+1); // print_r($_SERVER[ ...

  6. Ralph W. Tyler【拉尔夫·泰勒】

    Ralph W. Tyler Anyone who cares about what schools and colleges teach and how their student learn wi ...

  7. emwin如何在windows10下vs2015或2017进行仿真。

    Make sure the selected Windows SDK is installed:Properties -> Configuration Properties -> Gene ...

  8. Python框架之Django学习笔记(二)

    安装Django 我是在windows下安装的python以及django,下面的链接可以下载Django: http://www.djangoproject.com/download/ 1.下载 D ...

  9. 【Gas Station】cpp

    题目: There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. ...

  10. Web前端知识体系V0.1

    学习,是一个建立“索引”的过程-好比我们读一本书,读完之后,再次看这本书的目录结构,就会联想起很多书中的具体内容: 博客,是一个回顾所学的载体-学习完教学Video之后,通过书写博客,以达到记忆的目的 ...