React 实现一个验证码组件

在这个前端不懂 React 就会被误解成 low B 的时代，也只能苦逼的去学习一下咯。没有学习过的可以转到React官网或者React中文网。由于笔者也是没有学几天的初级选手，若有瞎说的地方，忘斧正！

所有依赖包都是通过Gulp管理，就不再赘述了。了解gulp请移步gulp 中文网。除此之外，为了减少工作量以及验证反馈的美观，引入了一个amazeui的Input组件

首先引入自己依赖包

'use strict';

var React = require('react');
var AMR = require('amazeui-react');
var Input = AMR.Input;

然后开始写自己的验证组件，我给他取名为 Captcha ：

var Captcha = React.createClass({
    propTypes: {
        bgImage: React.PropTypes.string,
        size: React.PropTypes.number,
        captchaType: React.PropTypes.oneOf(['Calculation', 'Normal']),
        color: React.PropTypes.string
    },

通过 PropTypes 来指定并验证 Captcha 组件的属性；在这里我规定了四个属性，都是不必须的（not required）。

bgImage：表示验证码的背景图片。
size：表示验证码的长度（只在Normal下有效）。
captchaType：表示验证类型，我这里写了两种，一个字符串，一个简单计算（即加减）。
color：表示验证码字母的颜色。

然后开始初始化一部分属性：

getDefaultProps: function() {
    return {
        size: 4,
        captchaType: 'Normal'
    };
},

同时设置 states 并初始化，在这里有三个状态会发生变化，即验证码内容，验证码结果（结果和内容好像是一起变的），用户输入。

getInitialState: function(){
    return {
        expression: '',
        validate: '',
        validateInput: ''
    };
},

expression：表示验证码的内容（可能是如：“21-9”）;
validate: 表示验证码结果（如“12”）；
validateInput：表示用户输入的结果；

做到这一步了，就要开始想如何得到这个 states 了，那么就要开始自定义一个生成验证码的方法如下：（纯属自己瞎写）

renderCode: function() {
    //定义expression和result，expression是字符串，result可能是字符串也可能是数字
    var expression = '', result;
    //判断验证码类型    
    if (this.props.captchaType == 'Calculation') {
        result = 0;//计算类型则result为数字，初始化为0
        //获取随机的两个两位数
        var Calpre = Math.round(Math.random()*100);
        var Calafter = Math.round(Math.random()*100);

        var codeCal = ['-','+','x'];//运算符
        var i = Math.round(Math.random()*2);//获得随机运算符

        switch (codeCal[i]) {//判断运算符并计算
            case '-': 
                expression = Calpre + '-' + Calafter;
                result = Calpre - Calafter;
                break;
            case '+': 
                expression = Calpre + '+' + Calafter;
                result = Calpre + Calafter;
                break;
            case 'x': 
                expression = Calpre + 'x' + Calafter;
                result = Calpre * Calafter;
                break;
        }
    } else if (this.props.captchaType == 'Normal'){
        result = '';
        var codeNormal = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';//字母库
        for (var i =0; i < this.porps.size; i ++) {
            result = result + codeNormal[Math.round(Math.random()*(codeNormal.length-1))];
        }//随机获取字母四个

        expression = result.toLowerCase();//忽略大小写
    }

    this.setState({//设置更新状态
        expression: expression,
        validate: result
    });
},

这样设置玩了基本上就可以渲染组件了，但是使用会发现刚进来的时候验证码生成方法即 renderCode 也没有触发，state并没有发生改变，默认expression为空，显示不出来验证码。
这里我在组件初始化渲染之后（即componentDidMount）手动触发一次。

componentDidMount: function() {
    this.renderCode();
},

验证码的生成做完了，接下来开始做用户输入和的校验。即在用户输入的时候 Input 发生改变的时候触发，setState 改变 validateInput 这个状态，重新渲染一次输入框：

handleChange: function() {
    this.setState({
        validateInput: this.refs.field.getValue()
    });
},

同时渲染之后要给用户一个反馈，这里就用到了amazeui Input 组件的一个验证属性validation，它有三个值即success，error，warning，根据不同的值，不同的反馈，我们只需要判断一下validateInput的值和result是否相等，若相等，返回success，不相等返回error，如下：

validate: function() {
    var thisInput = this.state.validateInput;
    var validateCode = this.state.validate;
    if (thisInput.toLowerCase() == validateCode.toString().toLowerCase()) {
        return 'success';
    } else if (thisInput != ''){
        return 'error';
    }
},

上面写完之后就可以渲染整个组件了：

render: function() {
    var inlineStyle = {
        color: this.props.color,
        backgroundImage: 'url(' + this.props.bgImage + ')'
    };
    return (
        
            
            
            {this.state.expression}
        
    );
}

module.exports = Captcha;

演示结果如下（只能上图了）：

乘法

字母

错误

加法

然后一个组件就这样实现了，如果要在其他地方使用这个组件，只需要引入这个组件即可。

var Captcha = require(/dir/Captcha);

....

render: function() {
    return (
        
    )
}

呃，就这样可以了。

React 实现一个验证码组件

你可能感兴趣的:(React 实现一个验证码组件)