antd-mobile+rc-form处理移动端表单验证

我就是我 2023-01-01 10:56 167阅读 0赞

import React, {Component} from  'react'
    import { createForm, formShape } from 'rc-form';
    import { InputItem } from 'antd-mobile';
    class Form extends Component {
      static propTypes = {
        form: formShape,
      };
      state = {
        nameErr: true
      };
      submit = () => {
        this.props.form.validateFields((error, value) => {
          console.log(error);
          if(error){
            React.$Toast.info('必填项参数不能为空');
          }
        });
      }
      validatorAccount = (rule, value, callback) => {
        callback(new Error('错误提示！'))
      }
      componentDidMount(){
        //设置默认值
        this.props.form.setFieldsValue({name:3333})
      }
      render() {
        let errors;
        const { getFieldProps, getFieldError } = this.props.form;
        return (
          <div>
            <InputItem
              name="account"
              clear
              {
              ...getFieldProps('account', {
                rules: [{ "validator": this.validatorAccount },{required: true, message:'请输入'}]
              })
              }
              error = { !!getFieldError('account')}
              placeholder="手机号/邮箱/会员名"
            >
            </InputItem>
            <button onClick={this.submit}>保存</button>
          </div>
        );
      }
    }
    
    export default createForm()(Form);

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关 php教程：表单处理和表单验证

表单和用户输入表单处理当处理 HTML 表单时，PHP 能把来自 HTML 页面中的表单元素自动变成可供 PHP 脚本使用。 form.html 文

朴灿烈づ我的快乐病毒、/ 2023年10月16日 16:17/ 0 赞/ 72 阅读

相关 antd-mobile+rc-form处理移动端表单验证

import React, {Component} from 'react' import { createForm, formShape } from 'r

我就是我/ 2023年01月01日 10:56/ 0 赞/ 168 阅读

相关表单验证

应用一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script> <script src="Scripts/jqu

朱雀/ 2022年07月24日 06:28/ 0 赞/ 456 阅读

相关表单验证

java script验证表单时常用： "^-\[0-9\]\\[1-9\]\[0-9\]\＄"　　//负整数 "^-?//d+＄"　　　　//整

ゝ一纸荒年。/ 2022年06月13日 07:54/ 0 赞/ 294 阅读

相关表单验证

@Min(value = 18, message = " 不得小于18 ") private Integer age; / 表单验证 /

╰+攻爆jí腚メ/ 2022年06月05日 10:15/ 0 赞/ 283 阅读

相关表单验证

angularjs 表单验证，包含必填、手机、邮箱、ip、网址等基于angularjs自己封装的验证插件，之前的插件在angularjs上就不能使用了，然后将之前的封

淩亂°似流年/ 2022年06月04日 10:14/ 0 赞/ 285 阅读

相关 element ui 表单验证残留提示处理

问题：如果vue的同一个页面拥有两个表单。验证第一个表单时没有通过就切换到第二个，那么第二个表单会出现验证错误的信息 ![70][] 点击编辑框 ![70 1][]

布满荆棘的人生/ 2022年05月28日 01:06/ 0 赞/ 241 阅读

相关表单验证

表单验证为了减轻服务器的压力，请求次数减少，保证用户输入符合要求。 > 常用的表单验证 > \- 日期样式 > \- 表单内容是否为空 > \- 用户名和密码

梦里梦外;/ 2022年05月24日 04:40/ 0 赞/ 295 阅读

相关表单验证

代码虽然有重复，但是重要的是思想和正则表达式的用 ---------- <!DOCTYPE html>

痛定思痛。/ 2022年05月19日 06:35/ 0 赞/ 327 阅读

相关表单验证

java script验证表单时常用： "^-\[0-9\]\\[1-9\]\[0-9\]\＄"　　//负整数 "^-?//d+＄"　　　　//整

小灰灰/ 2022年01月07日 14:35/ 0 赞/ 431 阅读