Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Form Validator Widget
JavaScript
Failed to load latest commit information.
docs Update documents
examples chore: update doc
src Change the default error message
tests number contains 0 fix#84
.gitignore update REAME.md
.spmignore add spmignore
.travis.yml
HISTORY.md Bump version
README.md update REAME.md
index.js migrate to spm@3x
package.json

README.md

Validator


spm package Build Status Coverage Status

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

Validator 继承了 widget,可使用其中包括 baseclasseventsattributeaspect 的属性和方法。

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

<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();
    });
});

JS API

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"}'
        });
    });
});
Something went wrong with that request. Please try again.