表单
目前提供表单的验证功能。
代码演示
实时验证
1 2 3 4
| .woui-form-message { display: inline; color: #c00; }
|
1 2 3 4 5 6 7 8 9 10 11
| <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>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| 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' } })
|
验证获取回调事件
1 2 3 4
| .woui-form-message { display: inline; color: #c00; }
|
1 2 3 4 5 6 7 8 9 10 11
| <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>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| 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
规则结构如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| { name: 'user', 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
: 验证结果,返回验证规则的相应验证结果,字段如下:
1 2 3 4 5 6 7 8 9 10 11
| { $modify: true, $valid: true, name: "user", isRequired: true, length: true, maxLength: true, minLength: true, rep: true, fn: true }
|
component
: 当前验证组件的实例化对象,一般仅在二次开发中直接操作组件时使用。
说明
目前表单仅仅支持 input
标签输入类型控件(text
password
number
tel
等)的验证,不支持单选框、多选框、选择框等控件验证。
针对 data-form-item
增加错误样式类和自动展示提示语,此功能是实时的。如不希望使用实时功能,可以不提供对应的样式类以及规则配置中的 message
,即不在进行处理。如需要进行展示验证,则需要监听事件手动进行操作。