表单验证的痛点：allowBlank属性背后的暗地

你是不是曾在用Ext表单时遇到过用户能轻巧松提交空数据的尴尬情况？或者，你尝试创建一个可选字段，却找到系统怎么都不让提交？这一切的源头，往往在于一个被忽视的属性——allowBlank。

搞懂allowBlank：它是门卫， 也是守护者

在ExtJS中，allowBlank属性就像你家细小区的门卫。默认情况下它是一个宽阔容的老巨大爷，不管你是不是持有门禁卡，都能自在进出。但如果你想让它变得更加严格，就需要正确的指令。

比方说在创建一个用户名必填项时正确的做法是设置allowBlank为false。这样，用户就不能提交空的用户名了。

实战技巧：allowBlank的值

在实际开发中，我们三天两头需要根据特定条件来字段的可选性。比如当用户选择“企业用户”时公司名称才变成必填项。这时我们就能在监听事件中修改allowBlank的值。

比方说：

     {
        if {
            field.setAllowBlank;
            field.validate;
        } else {
            field.setAllowBlank;
            field.clearInvalid;
        }
    });
    

避免验证失效的常见问题

有时候， 尽管你已经正确设置了allowBlank，验证仍然不起作用。

• 表单的submit动作是不是调用了isValid方法
• 字段所在的容器是不是设置了layout: 'form'
• 是不是在afterRender之后才修改allowBlank
• Ext JS 4和Ext JS 6有些版本存在验证延迟的问题

深厚入案例：怎么应对麻烦的表单验证

在一个实际的案例中，我们遇到了一个麻烦的表单验证问题。用户在提交表单时总是出现验证输了的情况。无法正常进行。

解决方法是在修改容器的layout属性后沉新鲜渲染表单。这样，验证问题就得到了解决。

让Ext表单听话， 从搞懂allowBlank开头

不仅能搞优良用户体验，还能搞优良数据的准确性。从眼下开头，让你的Ext表单更加听话吧！

---