extjs4服务器端验证，如何？

Question

我在 extjs 中有一个表单，我需要在服务器端对其进行一些验证测试并返回消息错误 但我不知道该怎么做！

我需要验证新添加的 IP 地址是否已经存在，

我还需要验证它是否实际上是一个有效的地址（我有可以执行此操作的 ac# 函数）

如果这些条件都可以，则可以添加。 如果没有，我想向用户显示一条错误消息，说明

现在当我调用“保存”按钮提交时出现什么问题，在执行插入查询之前，我在 C# 上进行了这些测试，但即使这些测试不正常它仍然在表单上显示成功，因为我不知道如何告诉 extjs4 有错误

编辑 这就是我到目前为止尝试做的

我的表单提交：

this.up('form').getForm().submit
({
    url: 'AddData.ashx',
    params: { action: 'addip' },
    success: function (form, action) {
        Ext.MessageBox.show({ title: 'Success !',
            msg: 'IP added successfully<br />',
            icon: Ext.MessageBox.INFO,
            buttons: Ext.MessageBox.OK
        });

        Ext.getCmp('addipform').getForm().reset();
    },
    failure: function (form, action) {
        switch (action.failureType) {
            case Ext.form.action.Action.CLIENT_INVALID:
                Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                break;
            case Ext.form.action.Action.CONNECT_FAILURE:
                Ext.Msg.alert('Failure', 'Ajax communication failed');
                break;
            case Ext.form.action.Action.SERVER_INVALID:
                Ext.Msg.alert('Failure', action.result.msg);
        }
    }
})

在我的 AddData.ashx 中，有一个函数 addip() ，当操作参数为“addip”时调用该函数 这个函数返回：

public string addip()
{
   //my queries ...
   string result = new JavaScriptSerializer().Serialize("{    success:false,  errors:{    text:\"The IP already exist!\",  ip:\"The is not an IP !\"  }  }");
   return result;
}

但什么也没发生！

Answer 1

在启动并运行它之前，请确保您已经拥有可以提供类似于这些调用的查询的页面：

Request: http://localhost/verify.aspx?ip=192.168.0.1
Response: {success: true, message: "The IP is correct"} //you can pass as much items as you want here

Request: http://localhost/verify.aspx?ip=127.0.0.1
Response: {success: false, message: "The IP is already exist!"}

这听起来很简单，对吧？

然后在你的ExtJS中，你可以有这样的代码（如果有任何语法错误，请原谅，还没有测试它）

var w = Ext.create('Ext.window.Window', {
    width: 300,
    height: 250,
    items: Ext.create('Ext.form.Panel', {
        items: [{
            xtype: 'textfield',
            fieldLabel: 'IP'
        }]
    }),
    buttons: [{
        text: 'Save',
        handler: function() {
            var ip = w.down('textfield').getValue();

            //Some client side validation first
            //then we submit it

            //Use Ajax request          
            Ext.Ajax.request({
                url: 'http://localhost/verify.aspx?ip='+ip,
                success: function(r) {

                    //r is the raw response object, we need to parse it
                    var res = Ext.decode(r.responseText, true);

                    //Then here we are. We can check the transaction
                    //status. This is the exact object you passed
                    //in the above Request-Response pair.
                    if (res.success) {
                        //ip is correct. Do your other stuff here
                    }else{
                        //ip is incorrect. You may want to show the error message
                        alert(res.message);
                    }

                }
            }); 
        }
    }]
});

免责声明：这只是一个简单的例子，我希望它有帮助:)

Answer 2

假设您将表单提交到 C#，一旦您执行了验证，并且如果这些验证失败，那么您将必须以以下格式输出 JSON：

{
    success:false,
    errors:{
        field1:errorMsg1,
        field2:errorMsg2
    }
}

这里，field1 是表单中您想要的字段的名称显示错误。

您必须从服务器端输出此 JSON，就像响应 Ajax 请求时所做的那样，这本身会将必填字段标记为无效，并在鼠标悬停在该字段上时显示错误消息。

希望这有帮助。