表单

目前提供表单的验证功能。

代码演示

实时验证

.woui-form-message {
    display: inline;
    color: #c00;
}

<form id="J_Form1">
    <div data-form-item>
        <div class="woui-input-wrapper" style="width: 300px;">
          <div class="woui-input-group">
            <div class="woui-input-group-prepend">用户名:</div>
            <input type="text" placeholder="请输入内容" class="woui-input woui-input-append" name="user">
          </div>
        </div>
        <div data-message></div>
    </div>
</form>

var form1 = new woUI.Form('#J_Form1')
form1.addRule({
    name: 'user',
    isRequired: true,
    minLength: 3,
    maxLength: 10,
    rep: /^[a-z]+$/,
    fn: function (v) {
        return v !== 'admin'
    },
    message: {
        isRequired: '用户名必填',
        minLength: '用户名最少输入3位',
        maxLength: '用户名最多输入10位',
        rep: '用户名仅支持小写字母',
        fn: '用户名不能为admin'
    }
})

验证获取回调事件

.woui-form-message {
    display: inline;
    color: #c00;
}

<form id="J_Form2">
    <div data-form-item>
        <div class="woui-input-wrapper" style="width: 300px;">
          <div class="woui-input-group">
            <div class="woui-input-group-prepend">用户名:</div>
            <input type="text" placeholder="请输入内容" class="woui-input woui-input-append" name="user">
          </div>
        </div>
        <div data-message></div>
    </div>
</form>

var form2 = new woUI.Form('#J_Form2')
form2.addRule({
    name: 'user',
    isRequired: true,
    minLength: 3,
    maxLength: 10,
    rep: /^[a-z]+$/,
    fn: function (v) {
        return v !== 'admin'
    },
    message: {
        isRequired: '用户名必填',
        minLength: '用户名最少输入3位',
        maxLength: '用户名最多输入10位',
        rep: '用户名仅支持小写字母',
        fn: '用户名不能为admin'
    }
})
form2.onLazy('user', function (va, comp) {
    console.log('失去焦点监听：', va, comp)
    window.alert('输入框失去焦点。\n可以开启控制台查阅信息')
})

html 支持属性

属性	是否必须	可选值	说明
`data-form-item`	yes	空	表单每个控件的位置标志，有此标志的控件才会被验证。验证失败后，此元素会增加样式类 `woui-common-error`
`data-message`	yes	空	表单验证失败提示内容字段，此属性必须嵌套在 `data-form-item` 内

API

初始化

new woUI.Form(queryString)

queryString: 可以传入 Element.queryString 支持字符串，也可以直接传入元素对象

添加验证规则

woUI.prototype.addRule(rule)

rule 规则结构如下：

{
    name: 'user',              // 绑定对应的控件元素 name 值
    isRequired: true,          // 是否必填
    length: 5,                 // 长度多少控制
    minLength: 3,              // 最小长度
    maxLength: 10,             // 最大长度
    rep: /^[a-z]+$/,           // 正则验证
    fn: function (v) {         // 自定义函数验证
      return v !== 'admin'
    },
    message: {                 // 未通过相应验证返回的信息，字段名同上
      isRequired: '用户名必填',
      length: '用户名长度必须是5位',
      minLength: '用户名最少输入3位',
      maxLength: '用户名最多输入10位',
      rep: '用户名仅支持小写字母',
      fn: '用户名不能为admin'
    }
}

需要特殊说明的是：

如果控制了 length，那么 minLength maxLength 将不生效；

自定义函数验证，必须返回 Boolean 类型值，否则会将返回值强制转为 Boolean 类型。返回 true 表示验证通过；

验证顺序为：必填、长度、正则、自定义函数。

添加实时监听/失去焦点监听

woUI.prototype.on(validator, component)
woUI.prototype.onLazy(validator, component)

validator: 验证结果，返回验证规则的相应验证结果，字段如下：

{
    $modify: true,    // 当前元素是否被用户修改过
    $valid: true,     // 所有验证结果是否通过
    name: "user",     // 当前元素的 name 值
    isRequired: true,
    length: true,
    maxLength: true,
    minLength: true,
    rep: true,
    fn: true
}

component: 当前验证组件的实例化对象，一般仅在二次开发中直接操作组件时使用。

说明

目前表单仅仅支持 input 标签输入类型控件（text password number tel 等）的验证，不支持单选框、多选框、选择框等控件验证。

针对 data-form-item 增加错误样式类和自动展示提示语，此功能是实时的。如不希望使用实时功能，可以不提供对应的样式类以及规则配置中的 message，即不在进行处理。如需要进行展示验证，则需要监听事件手动进行操作。

表单