myInput

发布者: xiaozhimn

组件说明

myInput组件是一个简化表单校验的react自定义标签组件,开发者可以通过设置自定义属性来定义校验规则。

组件使用

第一步 安装组件

在easyme项目根目录下执行 npm install myInput 对myInput组件进行安装

第二步 在当前页面init.js文件中加载组件文件

use(["public/javascripts/service/testService.js",
     "public/javascripts/widget/myInput/myInput.js"
    ], function(testService, MyInputComponent) {
    var PageComponent = React.createClass({
        componentDidMount: function() {

        },
        receiveMsg: function(data) {

        },
        getInitialState: function () {
            return this.props ? this.props : {};
        },
        render:function() {
            var data = this.state.data;
            return ~init;
        }
    });
    if(typeof ReactDOM != "undefined") {
        ReactDOM.render(<PageComponent data={storage}/>, document.getElementById('container'));
    }
    module.exports = PageComponent;
});

第三步 在当前页面模板中使用组件

<MyInputComponent rule="{'reg':'email','maxLength':'30','require':'true'}" errorMsg="{'rule':'请输入中英文、数字、空格和符号“-”、“_” '}" ref="name" name="name" id="name" />

第四步 在js中获取它的校验结果

  this.refs["name"].isOk() 如果校验通过则返回 true, 反之返回 false

参数说明

reg        为组件内置的正字表达式别名,内容如下可以扩展,也可以直接写正则表达式:
           regList: {
               amount: /^[1-9]\d*$/,
               numbers: /^\d+$/,
               name: /^([\w\u4E00-\u9FA5_\-]+)+$/,
               onlyname:/^([\w\u4E00-\u9FA5_\-\s]+)+$/,
               code: /^([\w_\-]+)+$/,
               phone: /^([\d_\-\+]+)+$/,
               number: /^\d+(\.\d+)?$/,
               hsCode: /^\d+$|^\d+\.\d+$/,
               positivenum: /^[1-9](\d)*$/,
               packageNum: /^[1-9]\d*$/,
               isLimitFloat:/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,3})?$/,
               email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
               triadCode: /^[A-Za-z]+$/,
               floatTwo: /^(\d{1}|[1-9][0-9]*)$|^(0{1}|[1-9][0-9]*)\.\d{1,2}$/,
               gpCode: /^([1-9]{1}|[1-9][0-9]{1,8})$|^([1-9]{1}|[1-9][0-9]{0,8}\.\d{1,2})$|^[0]\.
                       [0][1-9]$|^[0]\.[1-9]$|^[0]\.[1-9][0-9]$/
           }
maxLength  为输入框的字符长度限制
require    如果为true表示有必填项校验 
errorMsg   正则表达式不匹配的错误提示文案
ref        如果有js表单提交校验,必填否则无法获取到组件的引用,使用方法如上
2赞

xiaozhimn

时间:3/8/2018, 4:31:19 PM

回复