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 (
        <div>
            <Input
            value={this.state.validateInput}
            placeholder="请输入验证码"
            validation={this.validate()}
            ref="field"
            onChange={this.handleChange} hasFeedback/>
            <AMR.Button style={inlineStyle} 
            className="am-btn" 
            onClick={this.renderCode}>
            {this.state.expression}</AMR.Button>
        </div>
    );
}

module.exports = Captcha;

演示结果如下(只能上图了):

乘法
字母
错误
加法

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

var Captcha = require(/dir/Captcha);

....

render: function() {
    return (
        <Captcha color="red" bgImage=".../xxx.png" captchaType="Calculation" size="4"/>
    )
}

呃,就这样可以了。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 155,883评论 24 680
  • 项目整体设计为前后端完全分离的模式,前端采用react以及amazeui构建用户交互界面,后端采用python f...
    arcsecw阅读 1,164评论 0 2
  • 现在最热门的前端框架,毫无疑问是 React 。上周,基于 React 的 React Native 发布,结果一...
    sakura_L阅读 154评论 0 0
  • 做梦夕阳下 ■田秀 和风一起张扬在夕阳下 和谁缓缓而...
    巴山雪儿阅读 88评论 0 2
  • 这是一个有些久远的故事,远到每次我们提起它,就像是在一间破烂,充满挥之不去,呛人霉味的老屋子的阁楼上,听着活了很久...
    砂蔚阅读 148评论 3 7