Validator

---

Validator 是一个能运行的表单校验组件。

Validator 继承了 widget，可使用其中包括 base、class、events、attribute、aspect 的属性和方法。

Feature List

• HTML5 form API。

• data-attribute API。

• 异步校验。

• 校验规则的组合，与、或、非。

• 校验规则的动态绑定与解绑。

• (TODO)关联性校验/级联校验。例如当满足一个条件时校验某种规则，满足另外的条件校验其他规则。

How to Use

提供两种方式调用：

• DOM。利用 html5 form API 和 data-attribute 在 DOM 中完成调用。
• JS API。在 javascript 代码中完成 validator 配置和调用。

DOM 调用

HTML

<formdata-widget="validator" class="ui-form"><divclass="ui-form-item"><labelfor="username" class="ui-label"><spanclass="ui-form-required">*</span>用户名：</label><inputid="username" name="username" class="ui-input" requiredtype="email" minlength="1" maxlength="20" /><divclass="ui-form-explain">用户名为电子邮箱。</div></div><divclass="ui-form-item ui-form-item-error"><labelfor="password" class="ui-label"><spanclass="ui-form-required">*</span>密码：</label><inputid="password" name="password" type="password" class="ui-input" minlength="5" /><divclass="ui-form-explain">密码的长度必须大于或等于5。</div></div><divclass="ui-form-item"><labelfor="password-confirmation" class="ui-label"><spanclass="ui-form-required">*</span>重复输入密码：</label><inputid="password-confirmation" name="password-confirmation" type="password" class="ui-input" data-rule="confirmation{target: '#password'}" /></div><divclass="ui-form-item"><spanclass="ui-button-morange ui-button"><inputclass="ui-button-text" value="确定" type="submit"></span></div></form>

JS

seajs.use(['widget','$'],function(Widget,$){$(function(){// 初始化所有使用`data-widget`指定的组件。Widget.autoRenderAll();});});

JS API

HTML

<formclass="ui-form"><divclass="ui-form-item"><labelfor="username" class="ui-label"><spanclass="ui-form-required">*</span>用户名：</label><inputid="username" name="username" class="ui-input" /><divclass="ui-form-explain">用户名为电子邮箱。</div></div><divclass="ui-form-item ui-form-item-error"><labelfor="password" class="ui-label"><spanclass="ui-form-required">*</span>密码：</label><inputid="password" name="password" type="password" class="ui-input" /><divclass="ui-form-explain">密码的长度必须大于或等于5。</div></div><divclass="ui-form-item"><labelfor="password-confirmation" class="ui-label"><spanclass="ui-form-required">*</span>重复输入密码：</label><inputid="password-confirmation" name="password-confirmation" type="password" class="ui-input" /></div><divclass="ui-form-item"><spanclass="ui-button-morange ui-button"><inputclass="ui-button-text" value="确定" type="submit"></span></div></form>

JS

seajs.use(['validator','$'],function(Validator,$){$(function(){varvalidator=newValidator({element: 'form'});validator.addItem({element: '[name=username]',required: true,rule: 'email minlength{min:1} maxlength{max:20}'}).addItem({element: '[name=password]',required: true,rule: 'minlength{min:5}'}).addItem({element: '[name=password-confirmation]',required: true,rule: 'confirmation{target: "#password"}'});});});