如何在Odoo中使用jQuery操作XML元素并实现数据验证？

一、脚本文件的正确位置与加载配置 #

1. 不要在视图文件夹放置单独HTML文件，Odoo不识别这种加载方式。将脚本放在模块的static/src/js/目录下，比如命名为form_validation.js。
2. 在模块的__manifest__.py中声明静态资源，让Odoo自动加载：

{
    # 保留模块原有配置（如name、version等）
    'assets': {
        'web.assets_backend': [
            'your_module/static/src/js/form_validation.js',
        ],
    },
}

二、适配Odoo的jQuery代码写法 #

Odoo是单页应用，表单为动态渲染，$(document).ready无法捕获表单加载事件，需绑定Odoo视图生命周期事件或用事件委托处理动态元素：

方案1：全局监听所有表单的输入事件

odoo.define('your_module.form_validation', function (require) {
    "use strict";

    var FormController = require('web.FormController');

    // 扩展FormController，在表单渲染完成后绑定事件
    FormController.include({
        renderButtons: function () {
            this._super.apply(this, arguments);
            // 用事件委托监听输入框的keyup事件
            this.$el.on('keyup', 'input', function(event) {
                console.log('输入内容:', $(this).val());
                // 自定义验证逻辑示例：检查输入长度
                if ($(this).val().trim().length < 3) {
                    $(this).addClass('is-invalid');
                } else {
                    $(this).removeClass('is-invalid');
                }
            });
        },
    });
});

方案2：针对特定模型的表单做自定义操作

如果仅需给某个模型的表单添加逻辑，可以注册自定义视图：

odoo.define('your_module.form_validation', function (require) {
    "use strict";

    var FormController = require('web.FormController');
    var FormView = require('web.FormView');
    var viewRegistry = require('web.view_registry');

    var CustomFormController = FormController.extend({
        renderButtons: function () {
            this._super.apply(this, arguments);
            // 针对当前模型的特定字段绑定事件
            this.$el.find('input[name="your_field"]').on('keyup', function() {
                // 仅允许输入数字的验证逻辑
                if ($(this).val().match(/[^0-9]/)) {
                    console.log('只能输入数字');
                    $(this).val($(this).val().replace(/[^0-9]/g, ''));
                }
            });
        },
    });

    var CustomFormView = FormView.extend({
        config: _.extend({}, FormView.prototype.config, {
            Controller: CustomFormController,
        }),
    });

    // 注册自定义视图类型
    viewRegistry.add('custom_form_validation', CustomFormView);
});

然后在对应模型的表单视图XML中指定使用该自定义视图：

<record id="your_model_form_view" model="ir.ui.view">
    <field name="name">your.model.form.view</field>
    <field name="model">your.model</field>
    <field name="arch" type="xml">
        <form js_class="custom_form_validation">
            <sheet>
                <group>
                    <field name="your_field"/>
                    <!-- 其他字段定义 -->
                </group>
            </sheet>
        </form>
    </field>
</record>

三、关键注意事项 #

• Odoo后台已内置jQuery，无需额外引入。
• 处理动态生成的元素时，必须使用事件委托（this.$el.on(event, selector, callback)）或监听Odoo的视图渲染事件，直接绑定元素不会生效。
• 验证样式可使用Odoo自带的is-invalid类，会自动显示错误提示样式。

内容的提问来源于stack exchange，提问作者Hoda Shakourbin