wx-form-validate

初衷：一直以来，表单校验就是一个常用的功能，但是我做了几个月的小程序，却没找到让我心满意足的表单校验组件，因此决定自己撸一个出来。

下载地址：wx-formValidate

基础用法：

引入form和field组件，同时要保持与instance.js同级目录。(注意：由于小程序的诸多限制，如果需要修改相关的css样式和布局，可以进入到组件的wxml和wxss修改。)

用法

Form

props

参数	说明对象	类型	默认值
model	表单数据对象	object
rules	表单验证规则	object

事件

事件名称	说明	回调参数
bind:validate	任一表单项被校验后触发	e.detail:被校验的表单项 prop 值，校验是否通过，错误消息
bind:submit	数据验证成功后回调事件	-

方法

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段信息。	Function(callback: Function(boolean, array))
validateField	对部分表单字段进行校验的方法，返回每个字段是否校验成功状态和相应字段及信息	Function(props: array | string, callback: Function(errorMessage: object
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	-
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组。	Function(props: array | string)

注意；使用this.selectComponent('#form')获取form组件实例后，就可以调用这些方法。('#form'为form组件绑定的id)

<form model="{{model}}" rules="{{rules}}" id="form">
...
</form>

    this.setData({
      form: this.selectComponent('#form')
    })
    ////
    this.data.form.resetFields()

Field

默认是个输入框组件，可以使用custom开启slot，插入自定义表单组件。

props

参数	说明	类型	默认值
prop	表单域 model对应的 字段	string	-
value	表单域的值	不限	-
label	label文本	string	-
placeholder	文本占位符	string	'请输入'
placeholderStyle	文本占位符自定义样式	string	-
custom	是否插入自定义表单组件	boolean	false
autoChecked	对于其它非input组件，对值进行自动校验	boolean	true

事件

事件名	说明	回调参数
bind:change	input输入框值改变时触发	e.detail:{prop:字段名,value:变化后的值}
bind:blur	input离开焦点后触发	-

校验规则

本插件为了简化，基本没有内置校验规则，都要开发者手动设置，规则在rules中配置。

示例如下：

    rules: {
      name: [{
        validator: (value, callback) => {
          if (!value) {
            callback(new Error('请输入姓名'))
          }
        },
        trigger:'blur'
      }],
      phone: [{
        validator: (value, callback) => {
          if (!value) {
            callback(new Error('请输入手机号'))
          }
        }
      }],
      checked: [{
        validator: (value, callback) => {
          if (!value) {
            callback('请打开开关')
          }
        }
      }]
    }

每个字段可以配置多个规则，每个规则对象有validator和trigger属性，validator为规则函数，第一个参数是字段值，第二个是抛出相应错误信息的函数，参数为string或error实例(一旦捕捉到错误信息，同一字段的后面规则便不再执行)。trigger为触发条件，可以为字符串或者数组，值为blur' | 'change' | ['change', 'blur']，默认为['change', 'blur']。基本是input组件使用trigger这个属性。其它非input组件可以使用autoChecked进行自动实时校验，类似‘change’。或者使用form中validateField方法在相关事件函数中手动校验。

template模板代码

<form model="{{model}}" rules="{{rules}}" id="form">
  <field prop="name" value="{{model.name}}" placeholder="请输入姓名" label="姓名" bind:change="onChange" />
  <field prop="phone" value="{{model.phone}}" placeholder="请输入手机号" label="手机" bind:change="onChange" />
  <field custom prop="checked" value="{{model.checked }}" label="开关">
    <van-switch checked="{{ model.checked }}" bind:change="onChangec" />
  </field>
</form>

model:{
      name: '',
      phone: '',
      checked: true
  },
  /////
 onChange(e) {
    const {
      prop,
      value
    } = e.detail
    this.data.model[prop] = value
    this.setData({
      model: this.data.model
    })
  },
  onChangec({
    detail
  }) {
    this.data.model['checked'] = detail
    this.setData({
      model: this.data.model
    })
  },