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));

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM