Validator 是一个能运行的表单校验组件。
Validator 继承了 widget，可使用其中包括 base、class、events、attribute、aspect 的属性和方法。
-
HTML5 form API。
-
data-attribute API。
-
异步校验。
-
校验规则的组合，与、或、非。
-
校验规则的动态绑定与解绑。
-
(TODO)关联性校验/级联校验。例如当满足一个条件时校验某种规则，满足另外的条件校验其他规则。
提供两种方式调用：
- DOM。利用 html5 form API 和 data-attribute 在 DOM 中完成调用。
- JS API。在 javascript 代码中完成 validator 配置和调用。
HTML
<form data-widget="validator" class="ui-form">
<div class="ui-form-item">
<label for="username" class="ui-label"><span class="ui-form-required">*</span>用户名：</label>
<input id="username" name="username" class="ui-input" required type="email" minlength="1" maxlength="20" />
<div class="ui-form-explain">用户名为电子邮箱。</div>
</div>
<div class="ui-form-item ui-form-item-error">
<label for="password" class="ui-label"><span class="ui-form-required">*</span>密码：</label>
<input id="password" name="password" type="password" class="ui-input" minlength="5" />
<div class="ui-form-explain">密码的长度必须大于或等于5。</div>
</div>
<div class="ui-form-item">
<label for="password-confirmation" class="ui-label"><span class="ui-form-required">*</span>重复输入密码：</label>
<input id="password-confirmation" name="password-confirmation" type="password" class="ui-input" data-rule="confirmation{target: '#password'}" />
</div>
<div class="ui-form-item">
<span class="ui-button-morange ui-button"><input class="ui-button-text" value="确定" type="submit"></span>
</div>
</form>JS
seajs.use(['widget', '$'], function(Widget, $) {
$(function() {
// 初始化所有使用`data-widget`指定的组件。
Widget.autoRenderAll();
});
});HTML
<form class="ui-form">
<div class="ui-form-item">
<label for="username" class="ui-label"><span class="ui-form-required">*</span>用户名：</label>
<input id="username" name="username" class="ui-input" />
<div class="ui-form-explain">用户名为电子邮箱。</div>
</div>
<div class="ui-form-item ui-form-item-error">
<label for="password" class="ui-label"><span class="ui-form-required">*</span>密码：</label>
<input id="password" name="password" type="password" class="ui-input" />
<div class="ui-form-explain">密码的长度必须大于或等于5。</div>
</div>
<div class="ui-form-item">
<label for="password-confirmation" class="ui-label"><span class="ui-form-required">*</span>重复输入密码：</label>
<input id="password-confirmation" name="password-confirmation" type="password" class="ui-input" />
</div>
<div class="ui-form-item">
<span class="ui-button-morange ui-button"><input class="ui-button-text" value="确定" type="submit"></span>
</div>
</form>JS
seajs.use(['validator', '$'], function(Validator, $) {
$(function() {
var validator = new Validator({
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"}'
});
});
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent