README

使用此库，您可以使用规则验证 html 输入元素的值。

用法

注册 Yii2 资产

YiiJsEventHandlerAsset::register($this);

实例化 jQuery 插件

实例化此 jQuery 插件有两种方式。

使用默认属性

要使用默认选项，您需要在您的 html 元素中添加两个预定义属性。将您的 rules 放入 data-validation-rules 中。使用 space 分隔您的 rules。然后使用 data-validate-on 指定何时验证这些 input。可以在 data-validate-on 中放入的值遵循 jQuery 事件。请访问 表单事件，鼠标事件 和 键盘事件。

<input type='text' data-validate-on="change" data-validation-rules="required" />

定义自定义属性

另一方面，您可以定义自定义属性。为此，您需要实例化 inputValidator 插件。

$(document).ready(function () {
    $("[data-custom-validate-on]").inputValidator({
        validateOnAttribute: "data-custom-validate-on",  
	validationRulesAttribute: "data-custom-validation-rules",  
	validateValueEvent: "customValidateValue"
    });
});

现在，您可以使用这些属性如下所示

<input type='text' data-custom-validate-on="change" data-custom-validation-rules="required" />

注意： 尽量使用预定义的 event，但如果您定义了自定义的 validateValueEvent，您必须自己处理此事件。只有预定义的 event 被处理。

像这样处理您自定义的事件

$(document).on("customValidateValue", function (event) {
    var validator = new Validator(
        // Element which its value will validate 
        event.target,
        // Attribute of your element which holds rules for validation 
        "data-custom-validation-rules");
    validator.validate();
});

规则

某些模式可以具有自定义消息。如果任何 rule 获取一些属性，它将以 json 的形式获取属性。注意： 您可以使用多个规则。只需使用 space 分隔它们。

• required
• number
• ne
• nin
• in
• regex

required

描述

此规则检查 input 值的长度。

预定义消息

This field is required.

示例

<input type='text' data-validate-on="change" data-validation-rules="required" />

number

描述

此规则检查 input 值是否为 number。

预定义消息

This field should be number.

示例

<input type='text' data-validate-on="change" data-validation-rules="number" />

ne

描述

此规则检查 input 值是否不等于某个 value。

预定义消息

Invalid value.

示例

<!-- This means the value nust not be equal to 0 -->
<input type='text' data-validate-on="change" data-validation-rules='ne{"value":0,"errorMessage":"This input value should not be equal to 0."}' />

nin

描述

此规则检查 input 值是否不在某个 list 中。

预定义消息

The value must follow {pattern}

示例

<!-- This means the value must not be 1, test or 2 -->
<!-- Currently just numbers are supoorted -->
<input type='text' data-validate-on="change" data-validation-rules='nin{"values":[0,1,2],"errorMessage":"This input value should not be equal to 0, 1 or 2."}' />

in

描述

此规则检查 input 值是否在某个 list 中。

预定义消息

The value must follow {pattern}

示例

<!-- This means the value must be 1, test or 2 -->
<!-- Currently just numbers are supoorted -->
<input type='text' data-validate-on="change" data-validation-rules='in{"values":[0,1,2],"errorMessage":"This input value should be equal to 0, 1 or 2."}' />

regex

描述

此规则检查 input 值是否与 pattern 匹配。

预定义消息

Use only allowed characters follows by {pattern}

示例

<!-- This means the value must follow ^[a-z,_]+$ -->
<input type='text' data-validate-on="change" data-validation-rules='regex{"pattern":"^[a-z,_]+$"}' />