React: Validation

1.react-validation-mixinを使用

npm install react-validation-mixin

他のpackage.jsonの中にgulp-utilを追加するとnpm installを使用

"react-validation-mixin":"5.3.x"

(最新バージョンで、joi-validation-strategyと一緒使う)

2.使う

使い方

validatorTypesの定義

validatorTypes = {
  username: Joi.string().alphanum().min(3).max(30).required().label('Username'),
  password: Joi.string().regex(/[a-zA-Z0-9]{3,30}/).label('Password')
}

バリデーション

getValidationMessages: function(field){
  var err_msg = [];
  if (!this.isValid(field)) {
          err_msg.push("...");
        }  
 ...
}

レンダリング

this.renderHelpText(this.getValidationMessages('password'))

古いバージョン/ES5

import validation from 'react-validation-mixin'

var UserLogin = React.createClass({
mixin: [validation],

validatorTypes = {
      username: Joi.string().alphanum().min(3).max(30).required().label('Username'),
      password: Joi.string().regex(/[a-zA-Z0-9]{3,30}/).label('Password')
},
...
getValidationMessages: function(field){
      ...
      if (!this.isValid(field)) {
      ...
})

最新バージョン/ES6

import validation from 'react-validation-mixin'
import strategy from 'joi-validation-strategy'
class UserLogin extends Component {
constructor(props) {
    super(props);
    this.validatorTypes = {
      username: Joi.string().alphanum().min(3).max(30).required().label('Username'),
      password: Joi.string().regex(/[a-zA-Z0-9]{3,30}/).label('Password')
    };
  }
getValidationMessages: function(field){
      ...
      if (!this.props.isValid(field)) {
      ...
}
export default validation(strategy)(UserLogin)