formverify-ui

formverify-ui是一个超级轻量的表单校验组件，支持创建自定义封装的表单控件，能够运行在Web,Vue,React框架中

Web演示地址

index.html

使用说明

FormVerify 的web版本请见　https://kyomic.github.io/formverify/src/index.html

1.Vue版本示例

<template>
  <div>
    <KForm ref="form">
      <div class="form-group">
        <label class="form-label">名称：</label>
        <KInput name="input1" value='abc'></KInput>
      </div>
      <div class="form-group">
        <label class="form-label"><i class="required">*</i>名称(正则校验)：</label>
        <KInput name="input2" value='def' className="abc 124" ref="abc" rule=".+###^[a-zA-Z]+$" error="必填###只能填英文"></KInput>
      </div>
      <div class="form-group">
        <label class="form-label">复选框组</label>
        <KCheckBoxGroup name="checkboxgroup" rule=".+">
          <KCheckBox value="111">AAA</KCheckBox>
          <KCheckBox value="222">BBB</KCheckBox>
        </KCheckBoxGroup>
      </div>

      <div class="form-group">
        <label class="form-label">单选框组</label>
        <KRadioGroup name="radiogroup" rule=".+">
          <KRadio value="111">AAA</KRadio>
          <KRadio value="222">BBB</KRadio>
        </KRadioGroup>
      </div>
      <div class="form-group">
        <label class="form-label">复选框</label>
        <KCheckBox name="checkbox1" value="1" rule=".+">A</KCheckBox>
      </div>
      <div class="form-group">
        <label class="form-label"><i class="required">*</i>文本域：</label>
        <KTextArea name='textarea'></KTextArea>
      </div>
      <div class="form-group">
        <label class="form-label"><i class="required">*</i>下拉框：</label>
        <KSelect name="select" rule=".+">
          <KSelectOption value="">请选择</KSelectOption>
          <KSelectOption value="2">222</KSelectOption>
          <KSelectOption value="1">111</KSelectOption>
        </KSelect>
      </div>
      <div class="form-group">
        <label class="form-label"><i class="required">*</i>下拉框(多选)：</label>
        <KSelect name="select-mutiple" multiple rule=".+">
          <KSelectOption value="">请选择</KSelectOption>
          <KSelectOption value="2">222</KSelectOption>
          <KSelectOption value="1">111</KSelectOption>
        </KSelect>
      </div>
      <div class="form-group">
        <label class="form-label"><i class="required">*</i>函数校验：</label>
        <KInput className="abc 124" ref="abc" :rule="verifyFunc"></KInput>
      </div>
      <div class="form-group">
        <label class="form-label"><i class="required">*</i>自定义复合组件：</label>
        <KInputCompare className="abc 124" ref="abc" :rule="verifyFuncCompare"></KInputCompare>
      </div>
      <div class="form-group">
        <KButton @click="onCheckHandler()">校验</KButton>
        <KButton @click="onSubmitHandler()">表单数据</KButton>
      </div>
    </KForm>
  </div>
</template>

<script>
import {
  KForm,KInput,KButton,KCheckBox,KCheckBoxGroup,KRadio,KRadioGroup,KTextArea,KSelect,KSelectOption} from 'formverify-ui'
export default {
  name: 'App',
  components:{
    KForm,KInput,KButton,KCheckBox,KCheckBoxGroup,KRadio,KRadioGroup,KTextArea,KSelect,KSelectOption,
  },
  data(){
    return {
    }
  },

  computed:{},

  methods:{
    verifyFunc:function( val, component ){
      if( val ) return true;
      return {result:false}
    },
    onCheckHandler:function(e){
      let form = this.$refs.form;
      let res = form.verify();
      console.log('校验结果', res)
      if( res ){
        console.log("params", form.params())
      }
    },
    onSubmitHandler:function(){
      let form = this.$refs.form;
      console.log("表单参数", form.params())
    }
  },
  mounted(){}
}
</script>

2.React版本示例

注意

FormElement只能被HTMLDOM包含，并且一个HTMLDOM只能包含一个FormElement

import { KForm, KInput, KButton } from 'formverify-ui';
import './ui/style.less'
export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      elements:[]
    };
  }
  verifyFunc:function( val, component ){
    if( val ) return true;
    return {result:false}
  },
  onSubmitHandler(){
    let form = this.refs.form;
    let res = form.verify();
    if( !res ){
      return;
    }
  }
  addElement( ele ){
    console.log('render', ele)
  }
  componentDidUpdate(){
    console.log("eles", this.state.elements)
  }
  render(){
    return (
      <KForm ref="form">
        <div className="form-group"></div>
        <div className="form-group">
          <label className="form-label">名称：</label>
          <KInput className="abc" rule=".+###^[a-zA-Z]+$" error="必填###只能填英文"></KInput>
        </div>
        <div className="form-group">
          <label className="form-label">名称：</label>
          <KInput className="abc" rule={this.verifyFunc.bind(this)} error="必填###只能填英文"></KInput>
        </div>
        <div className="form-group">          
          <KButton className="test" onClick={this.onSubmitHandler.bind(this)}>提交</KButton>
        </div>
      </KForm>
    )
  }
}

3.交互校验

document.getElementById('button').onclick = function(){
    var res = FormVerify.verify( $("#form") )
    if( !res || res.result == false ){
       console.error("验证失败")
       return
    }
    var params = FormVerify.params($("#form"));
    //submit form ...
}

技术文档

1.组件API

抽象表单项
FormElement
@property
@rule {string|function} 正则规则或者函数
@error {string} 异常文本

HomePage http://www.shareme.cn

mailto:[email protected]

@kyomic

End