JSFiddle - React, Tailwind, and code Playground

by Andy keh

HTML

<form action="/test/index.php" class="test_form" id="test_form" method="post" target="_blank">

                        <div class="group">
                            <div class="col_1">
                                忽略隐藏元素验证可以设置
                            </div>
                            <div class="col_2">
                                <input type="hidden" name="hidden_email" data-type="*" class="input_text small " data-msg-null="请输入邮箱" ddata-msg-success=" " value="" placeholder="填写邮箱"/>
                                ignoreHidden:true
                            </div>
                            <div class="col_1 align_l">
                                <span class="verify_info"></span>
                            </div>
                        </div>

                        <div class="group">
                            <div class="col_1">
                                不填写不校验
                            </div>
                            <div class="col_2">
                                <input type="text" name="empty_email"  data-type="e" class="input_text small " data-msg-null="请输入邮箱" data-msg-error="输入不正确"  data-msg-success=" " data-ignore="empty" value="" placeholder="填写邮箱"/>

                            </div>
                            <div class="col_1 align_l">
                                <span class="verify_info"></span>
                            </div>
                        </div>

                        <div class="group">
                            <div class="col_1">
                                完全忽略设置规则也不校验
                            </div>
                            <div class="col_2">
                                <input type="text" name="ignore_email"  data-type="e" class="input_text small " data-msg-null="请输入邮箱" data-msg-success=" " data-ignore="ignore" value="" placeholder="填写邮箱"/>

                            </div>
                            <div class="col_1 align_l">
                               ...

SCSS

$gray:                  #CCC;
$grayLight:             #EEE;
$grayLighter:           #f5f7f6;
$white:                 #FFF;
$blue:                  #049cdb !default;
$blueDark:              #0064cd !default;
$green:                 #8ec919 !default;
$greenDark:             #11c269 !default;
$red:                   #ff493e !default;
$yellow:                #ffc40d !default;
$orange:                #f89406 !default;
$pink:                  #c3325f !default;
$purple:                #7a43b6 !default;

$inputFocusColor:       $green;
$inputSize:             40px !default;
$inputSmall:            30px !default;
$inputMini:             25px !default;

@mixin clearFix{
  &:after{
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
  }
}


@mixin input($color){
  border-color: $color;
  box-shadow: inset 0 1px 1px transparent;
  &:hover{
    @if $color == $gray{
      border-color: $inputFocusColor;
    }@else {
      border-color: $color;
    }

  }
  &:focus, &.focus{
    @if $color == $gray{
      border-color: $inputFocusColor;
      box-shadow: inset 0 1px 1px transparent, 0 0 5px lighten($inputFocusColor,5%);
    }@else {
      border-color: $color;
      box-shadow: inset 0 1px 1px transparent, 0 0 5px lighten($color,5%);
    }
  }
}

@mixin btn($color){
  background-color:$color;
  border-color: $color;
  &:hover,&:focus{
    background-color: darken( $color , 5%);
  }
  &:active{
    background-color: darken($color,5%);
    box-shadow: inset 0 3px 5px  darken($color,15%);
  }

}
.font_red         {color: $red}
.font_green       {color: $green}
.font_orange      {color: $orange}
.font_blue        {color: $blue}
.font_gray        {color: $gray}
.input_text{
  background-color: $white;
  border:1px solid $grayLight;
  outline:0px;
  padding:0;
  height: $inputSize;
  box-sizing: border-box;
  &.small{height: $inputSmall;}
  &.mini{height: $inputMini;}
  @include input($gray);
}
.input_text{text-indent:...

JavaScript

function BitValidator(options){
        var _language ={
                'error'        : '错误',
                'success'      : '校验通过',
                'undefined'    : '未定义',
                'error_min'    : '数值小于',
                'error_max'    : '数值大于',
                'error_submit' : '表单提交出错',
                'error_input'  : '输入错误',
                'error_null'   : '请输入信息'
            },
            _dataType = {
                /*是否为空*/
                "*":/[\w\W]+/,
                /*数字*/
                "n":/^\d+\.?\d*$/,
                /*特殊字符*/
                "s":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/,
                /*手机号*/
                "m":/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/,
                /*邮箱*/
                "e":/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
                /*链接*/
                "url":/^(\w+:\/\/)?\w+(\.\w+)+.*$/,
                /*数字对比*/
                "num_range":function(obj){
                var _min = Number($(obj).data('min')),
                    _max = Number($(obj).data('max')),
                    _val = $(obj).val();

                if(/^\d+\.?\d*$/.test(_val)){
                    if(_val<_min){
                        return _language.error_min +_min
                    }
                    if(_val>_max){
                        return _language.error_max +_max
                    }
                }else{
                    return false
                }
                return true;
                },
                /*两个值对比*/
                "compare":function(obj){
                    var _val     = $(obj).val(),
                        _compare = $(obj).parents('form').find('[name="'+$(obj).data("compare")+'"]').val();
                    return _val == _compare;
                }
            },
            _default = {
                //表单对象
                forms:null,
                /*默认设置*/
                /*表单验证前*/
                beforeSend:null,
                /*表单验证中未通过*/
 ...