js中自定义react数据验证组件实例详解


Posted in Javascript onOctober 19, 2018

我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题。如果用户提交的数据不合法,例如格式不正确、非数字类型、超过最大长度、是否必填项、最大值和最小值等等,我们需要在相应的地方给出提示信息。如果用户修正了数据,我们还要将提示信息隐藏起来。

有一些现成的插件可以让你非常方便地实现这一功能,如果你使用的是knockout框架,那么你可以借助于Knockout-Validation这一插件。使用起来很简单,例如我下面的这一段代码:

ko.validation.locale('zh-CN');
ko.validation.rules['money'] = {
  validator: function (val) {
    if (val === '') return true;
    return /^\d+(\.\d{1,2})?$/.test(val);
  },
  message: '输入的金额不正确'
};
ko.validation.rules['moneyNoZero'] = {
  validator: function (val) {
    if (val === '') return true;
    return isNaN(val) || val != 0;
  },
  message: '输入的金额不能为0'
};
ko.validation.registerExtenders();
var model = {
  MSRP: ko.observable(0),
  price: ko.observable().extend({ required: true, number: true, min: 10000, money: true, moneyNoZero: true }),
  licence_service_fee: ko.observable().extend({ required: true, money: true }),
  purchase_tax: ko.observable().extend({ required: true, money: true }),
  vehicle_tax: ko.observable().extend({ required: true, money: true }),
  insurance: ko.observable().extend({ required: true, money: true }),
  commercial_insurance: ko.observable().extend({ required: true, money: true }),
  mortgage: ko.observable(''),
  interest_discount: ko.observable(''),
  allowance: ko.observable().extend({ money: true }),
  special_spec_fee_explain: ko.observable(''),
  has_extra_fee: ko.observable(false),
  is_new_energy: ko.observable(false)
};
model.extra_fee_explain = ko.observable().extend({
  required: {
    onlyIf: function () {
      return model.has_extra_fee() === true;
    }
  }
});
model.extra_fee = ko.observable().extend({
  required: {
    onlyIf: function () {
      return model.has_extra_fee() === true;
    }
  },
  money: {
    onlyIf: function () {
      return model.has_extra_fee() === true;
    }
  }
});
model.new_energy_allowance_explain = ko.observable().extend({
  required: {
    onlyIf: function () {
      return model.is_new_energy() === true;
    }
  }
});
model.total_price = ko.computed(function () {
  var _total = Number(model.price()) + Number(model.licence_service_fee()) +
    Number(model.purchase_tax()) + Number(model.vehicle_tax()) +
    Number(model.insurance()) + Number(model.commercial_insurance());
  if (model.has_extra_fee()) {
    _total += Number(model.extra_fee());
  }
  if (model.is_new_energy()) {
    _total -= Number(model.new_energy_allowance());
  }
  return isNaN(_total) ? '0' : _total.toFixed(2).replace(/(\.0*$)|(0*$)/, '');
});
model.errors = ko.validation.group(model);
ko.applyBindings(model);

更多使用方法可以查看github上的说明文档和示例。

但是,如果我们前端使用的是React框架,如何来实现和上面knockout类似的功能呢?我们可以考虑将这一相对独立的功能抽出来,写成一个React组件。看下面的代码:

class ValidationInputs extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   isValid: true,
   required: this.props.required,
   number: this.props.number,
   min: this.props.min,
   max: this.props.max,
   money: this.props.money,
   data: null,
   errors: ""
  }
 }
 componentWillReceiveProps(nextProps) {
  var that = this;
  if (this.state.data !== nextProps.data) {
   return setStateQ({data: nextProps.data}, this).then(function () {
    return that.handleValidation();
   });
  }
 }
 handleValidation() {
  var fields = this.state.data;
  // required validation
  if(this.state.required && isNilOrEmpty(fields)){
   return setStateQ({errors: '必须填写', isValid: false}, this);
  }
  // number validation
  if (this.state.number) {
   if (isNaN(fields)) {
    return setStateQ({errors: '请输入数字', isValid: false}, this);
   }
   if (!isNilOrEmpty(this.state.min) && !isNaN(this.state.min) && Number(this.state.min) > Number(fields)) {
    return setStateQ({errors: '输入值必须大于等于' + this.state.min, isValid: false}, this);
   }
   if (!isNilOrEmpty(this.state.max) && !isNaN(this.state.max) && Number(this.state.max) < Number(fields)) {
    return setStateQ({errors: '输入值必须小于等于' + this.state.max, isValid: false}, this);
   }
  }
  // money validation
  if (this.state.money) {
   if (fields.length > 0 && !/^\d+(\.\d{1,2})?$/.test(fields)) {
    return setStateQ({errors: '输入的金额不正确', isValid: false}, this);
   }
  }
  return setStateQ({errors: '', isValid: true}, this);
 }
 render() {
  return <span className="text-danger">{this.state.errors}</span>
 }
}

该组件支持的验证项有:

•required:true | false 检查是否必填项。
•number:true | false 检查输入的值是否为数字。 ◦如果number为true,可通过max和min来验证最大值和最小值。max和min属性的值都必须为一个有效的数字。

•money:true | false 验证输入的值是否为一个有效的货币格式。货币格式必须为数字,最多允许有两位小数。

如何使用?

我们在父组件的render()方法中加入该组件的引用:

<div className="item">
  <div className="col-xs-4">净车价:</div>
  <div className="col-xs-7">
    <input type="text" className="form-control" placeholder="0" value={this.state.price} onChange={this.changePrice.bind(this)}/>
    <ValidationInputs ref="validation1" data={this.state.price} required="true" number="true" min="10000" max="99999999" money="true"/>
  </div>
  <div className="col-xs-1 text-center">元</div>
  <div className="clear"></div>
</div>

我们将price变量加到父组件的state中,并给input控件绑定onChange事件,以便用户在修改了文本框中的内容时,price变量的值可以实时传入到ValidationInputs组件中。这样,ValidationInputs组件就可以立即通过自己的handleValidation()方法对传入的数据按照预先设定的规则进行验证,并决定是否显示错误信息。

注意,这里我们在引用ValidationInputs组件时,设置了一个ref属性,这是为了方便在父组件中获得ValidationInputs组件的验证结果(成功或失败)。我们可以在父组件中通过下面这个方法来进行判断(假设父组件中引用了多个ValidationInputs组件,并且每个引用都设置了不同的ref值):

// 父组件调用该方法来判断所有的输入项是否合法
checkInputs() {
  for (var r in this.refs) {
    var _ref = this.refs[r];
    if (_ref instanceof ValidationInputs) {
      if (!_ref.state.isValid) return false;
    }
  }
  return true;
}

 

这样,我们在父组件提交数据之前,可以通过这个方法来判断所有的数据项是否都已经通过验证,如果未通过验证,则不提交表单。

其它几个基于React的数据验证组件,不过貌似都是server端使用的:

https://github.com/edwardfhsiao/react-inputs-validation

https://github.com/learnetto/react-form-validation-demo

https://learnetto.com/blog/how-to-do-simple-form-validation-in-reactjs

总结

以上所述是小编给大家介绍的js中自定义react数据验证组件实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype Number对象 学习
Jul 19 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
jQuery实现视频展示效果
May 30 jQuery
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 #Javascript
深入理解移动前端开发之viewport
Oct 19 #Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 #Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 #Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 #Javascript
webstorm+vue初始化项目的方法
Oct 18 #Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 #Javascript
You might like
15个小时----从修改程序到自己些程序
2006/10/09 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
JS script脚本中async和defer区别详解
2020/06/24 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
python 限制函数调用次数的实例讲解
2018/04/21 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python对常见数据类型的遍历解析
2019/08/27 Python
通过实例解析Python调用json模块
2019/12/11 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
python实现感知机模型的示例
2020/09/30 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
售后专员岗位职责
2013/12/08 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
我爱我班主题班会
2015/08/13 职场文书
Python中相见恨晚的技巧
2021/04/13 Python