jQWidgets jqxValidator position属性

jQWidgets jqxValidator是一个基于jQuery框架的验证插件，可以用于验证表单输入数据的合法性。其中position属性用来设置验证提示信息的位置，默认值为“topLeft”，表示提示信息显示在被验证控件的左上方。

除了默认的“topLeft”，position属性还可以设置为“bottomLeft”、“topRight”、“bottomRight”、“centerLeft”、“centerRight”、“centerTop”或“centerBottom”，分别表示显示在被验证控件的下方左侧、上方右侧、下方右侧、中央左侧、中央右侧、中央上方或中央下方。

下面给出两个示例来说明position属性的使用方法：

示例一：将提示信息显示在被验证控件的中央上方

$(document).ready(function () {
    $("#form1").jqxValidator({
        position: "centerTop",
        rules: [{
            input: "#input1",
            message: "请输入正确的邮箱地址",
            action: "keyup, blur",
            rule: "email"
        }]
    });
});

在这个示例中，我们定义了一个表单对象“form1”，并用jqxValidator插件对其进行验证。position属性被设置为“centerTop”，所以提示信息会显示在被验证控件的中央上方。同时我们也对输入框“input1”进行了验证，要求输入的值为合法的邮箱地址。

示例二：将提示信息显示在被验证控件的下方左侧

$(document).ready(function () {
    $("#form2").jqxValidator({
        position: "bottomLeft",
        rules: [{
            input: "#input2",
            message: "请输入6-16位数字字母组合的密码",
            action: "keyup, blur",
            rule: function (input, commit) {
                var value = input.val();
                if (value.length < 6 || value.length > 16 || !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/.test(value)) {
                    commit(false);
                }
                commit(true);
            }
        }]
    });
});

这个示例中，我们同样定义了一个表单对象“form2”，并用jqxValidator插件对其进行验证。不同的是，position属性被设置为了“bottomLeft”，所以提示信息会显示在被验证控件的下方左侧。此外，我们对输入框“input2”进行了自定义的验证，要求输入的密码为6-16位数字字母组合。

综上所述，position属性可以方便地调整提示信息的位置，使表单验证的交互效果更加灵活自由。