5. Crie uma página de mensagem ---- controle de validação de dados e adicione dados
Introdução relacionada:
A correção dos dados é necessária para o site. Para verificar mais facilmente se os dados inseridos pelos usuários estão corretos, o ASP.NET fornece aos programadores controles de validação de dados. Os controles de validação de dados fornecidos pelo ASP.NET incluem. (Nota: Para exibir o código, todos os códigos a seguir possuem espaços depois de "<" e antes de ">". Pedimos desculpas pelo transtorno!):
A função | de controle |
RequiredFieldValidator | verifica se há entrada de dados em um campo de entrada. |
RangeValidator |
verifica | se os dados inseridos em um campo de entrada estão dentro de um intervalo específico. |
Testar se um campo de entrada é igual, diferente, maior, não menor ou menor que |
ValidationSummary | lista todos os controles que falharam no teste |
RegularExpressionValidator | Verifique se uma coluna está em conformidade com as regras de expressão regular |
Regras de validação personalizadas | do CustomValidator |
PASSO 1 Página de design <BR>Primeiro usamos uma tabela para projetar uma estrutura aproximada. Como a tabela COMMENTS no banco de dados contém
[Figura 5-1 Estrutura do banco de dados]
COMMENT_ID (número automático), FIRST_NAME (texto), LAST_NAME (texto), TELEPHONE (texto), EMAIL (texto), SUBMIT_DATE (data/hora), COMMENTS (notas), ANSWERED (valor booleano) e outros campos. De acordo com a necessidade, desenhamos a página conforme mostrado abaixo no site, denominada reg.aspx.
[Figura 5-2 página inicial]
Dentre eles, COMMENT_ID pode ser adicionado automaticamente pelo ACCESS, e ANSWERED não precisa ser adicionado pelo usuário. O valor padrão de SUBMIT_DATE é definido como Now() e ACCESS gravará automaticamente a data do registro adicionado.
Na página ASP anterior, podemos passar
para configurar caixas de entrada para inserir dados. ASP.NET possui um controle de caixa de texto para aceitar dados.
<asp:textbox id=”…” runat=”servidor” outros atributos/ >
No DreamweaverMX você pode clicar Botão de atalho para adicionar controle de caixa de texto. Na caixa de diálogo pop-up, defina o ID, o modo de texto (tipo de caixa de diálogo), a dica de ferramenta (o prompt quando o mouse passa sobre o controle), o Layout (design de estilo) e as informações de estilo (usadas para definir a entrada formato de texto e formato de borda da caixa de texto) para definir o controle. A imagem abaixo é a caixa de diálogo de configurações da caixa de texto.
[Figura 5-3 caixa de diálogo de configurações da caixa de texto 1]
[Figura 5-4 caixa de diálogo de configurações da caixa de texto 2]
[Figura 5-5 caixa de diálogo de configurações da caixa de texto 3]
Como o item de dados COMMENT requer a inserção de uma grande quantidade de texto, uma caixa de texto com múltiplas linhas de entrada precisa ser usada. Basta definir o modo de texto para MultiLine e inserir o número desejado de linhas (Rows).
Para gerar o evento adicionado, também é necessário um botão. Clique na guia Formulários e clique no botão "botão" para adicionar.
Uso da validação de dados STEP2
Como Nome_, Sobrenome, telefone e e-mail devem ser inseridos, para evitar que o usuário se esqueça de inserir, você pode adicionar o controle RequiredFieldValidator para verificar o controle. Como o controle exibirá o conteúdo que falha na verificação em seu local no caso de erros de validação, o controle de validação de dados deve ser colocado no local apropriado.
A sintaxe de controle para validação de dados RequiredFieldValidator é a seguinte:
< asp:RequiredFieldValidato outros atributos runat="server" >Mensagem de erro</ asp:RequiredFieldValidator >
ou
< asp:RequiredFieldValidator ErrorMessage="Mensagem de erro" Outros atributos runat="server"/ >
Após clicar em Mais Tags, selecione Servidor de Validação de Tags ASP.NET e você verá que existem diferentes tipos de controles de validação de dados para escolher. Precisamos adicionar o controle de validação asp:RequiredFieldValidator atrás da caixa de entrada First_name.
Na janela de configurações do controle RequiredfieldValidator, Controle a ser validado é o ID do controle de entrada associado a esse controle de validação de dados e Mensagem de erro é a mensagem exibida quando a validação de dados falha. Ao mesmo tempo, podemos selecionar o estilo desejado definindo informações de layout e estilo.
[Figura 5-6 Seleção do controle de validação]
[Figura 5-7 Caixa de diálogo de configurações de controle RequiredfieldValidator]
Ao mesmo tempo, adicione outro controle de validação de dados RequiredFieldValidato usando o mesmo método atrás da caixa de entrada Last_Name. Agora podemos salvar e visualizar a página. Quando nenhum dado for inserido nas caixas de entrada Nome e Sobrenome e o botão Enviar for clicado, uma mensagem de falha na verificação aparecerá. Conforme mostrado na Figura 5-8.
Mas muitas vezes precisamos verificar dados válidos. Por exemplo, o código postal deve ter 6 dígitos e o endereço de e-mail inserido precisa estar em um formulário específico. Aqui você precisa usar RegularExpressionValidator para verificar a validade dos dados. Nesta página de cadastro, tanto telefone quanto e-mail podem utilizar esse controle para verificação.
[Figura 5-8 Caixa de diálogo RequiredfieldValidator]
[Figura 5-9 Propriedades de configuração de e-mail]
Semelhante ao método de adição do controle de validação RequiredfieldValidator, clique em "Mais tags.." para optar por adicionar o controle de validação de dados. A diferença é definir a Expressão de Validação. Como o telefone precisa inserir de 7 a 10 dígitos, ele precisa ser configurado da seguinte forma:
[0-9]{7,10}
Sua sintaxe é a seguinte:
[]: Usado para definir caracteres aceitáveis. Por exemplo, az significa que 'a'-'z' minúsculos são caracteres aceitáveis, a-zA-Z significa que todas as letras são aceitáveis e 0-9 significa que todas as letras são aceitáveis. número.
{}: usado para definir o número de caracteres que devem ser inseridos, {7,10} significa que 7 a 10 caracteres podem ser inseridos, {0,} significa que 0 caracteres ilimitados podem ser aceitos.
'.': Indica a inserção de qualquer caractere. .{0,} significa que 0-infinitamente qualquer número de caracteres é aceitável.
|: Indica OR (ou), por exemplo, [A-Za-z]{3}|[0-9]{3} significa que 3 letras inglesas ou 3 números podem ser aceitos
(): Para facilitar a leitura, as strings que contêm o símbolo | são geralmente colocadas entre (). Por exemplo ([A-Za-z]{3}|[0-9]{3}).
: Se contiver símbolos especiais como [], {}, (), |, etc., deverá ser adicionado antes dessas strings.
A seguir estão alguns dos exemplos mais comumente usados:
E-mail: .{1,}@.{1,}/..{1}
Telefone (incluindo código de área): ([0-9]{3,4}))[0-9]{7,8}
Embora não haja garantia de que a entrada do usuário sejam os dados reais, o controle de validação pode garantir que o formato esteja correto.
[Figura 5-10 Página de visualização]
Quanto ao controle CompareValidator, suas propriedades são definidas da seguinte forma:
Control to Compare | define o controle ao qual é comparado. |
Control to Validate | define o controle ao qual está associado |
Valor a ser comparado | define o valor comparado |
O operador | define o relacionamento de comparação ( igual a, diferente de, maior que, maior que ou igual a, menor que, menor que ou igual a ) |
Tipo | Tipo de dados de comparação |
Mensagem de erro | exibe informações |
[Figura 5-11 Caixa de diálogo de configurações do CompareValidator]
O método de configuração do CustomValitor é semelhante a outros controles, mas a função manuscrita OnServerValidate (em Eventos) é necessária para verificar os dados.
[Figura 5-12 Caixa de diálogo de configurações do CustomValitor]
Por exemplo
< asp:CustomValidator id="CusValid" runat="server" ControlToValidate=Nome do controle OnServerValidate="TheFunction" >Mensagem de erro</ asp:CustomValidator >
<linguagem de script=”vb” runat=”servidor” >
Função TheFunction(remetente como objeto,,valor como string) como booleano
……..
retornar…
Função final
</ /script>
Este controle chamará a função TheFuncion. Se false for retornado, uma mensagem de erro será relatada.
Controle RangeValidator
[Figura 5-12 Caixa de diálogo de configuração RangeValidatorr]
Você pode definir o intervalo de valores por meio de Valor Mínimo e Valor Máximo. Ao mesmo tempo, você pode definir o tipo de comparação por meio de Tipo, como "string", "Inteiro" etc. Outras configurações são semelhantes às de outros componentes.
Há também um componente: ValidationSummary. Entre eles, HeaderText define o texto do cabeçalho e DisplayMode define o modo de exibição. Suas propriedades específicas são as seguintes:
Valor do atributo | que significa |
Lista BulletList SingleParagraph | ErrorMessage é exibido em linhas separadas. ErrorMessage é exibido em linhas separadas . |
[Figura 5-13 Caixa de diálogo de configuração da propriedade ValidationSummary]
Em anexo está o código fonte dos principais segmentos do programa:
<table width="75%" height="594" border="1" cellpadding="1" cellpacing="0" bordercolor="#999999" >
<tr>
< td width="22%" height="22" >Nome< /td >
< td width="38%" >< asp:textbox BackColor="#CCCCCC" ForeColor="#0033FF" ID="first" runat="server" TextMode="SingleLine" ToolTip="Insira o primeiro nome" MaxLength ="40" BorderWidth="1" largura="200"/ >< /td >
< td width="40%" >< asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="first" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="validname" runat="server" / > < /td >
< /tr>
<tr>
<td height="22" >Sobrenome</td >
< td >< asp:textbox BackColor="#CCCCCC" ForeColor="#0033FF" ID="Sobrenome" runat="server" TextMode="SingleLine" Width="200" ToolTip="Insira o sobrenome" BorderWidth= "1"/ >< /td >
< td >< asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="Sobrenome" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="vailLast" runat="server" / > </ /td >
< /tr>
<tr>
< td height="22" >Telefone</td >
< td >< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0066FF" ID="telefone" runat="servidor" TextMode="SingleLine" ToolTip="Insira seu telefone" Width=" 200" / >< /td >
< td > < asp:regularexpressionvalidator BackColor="#CCCCCC" ControlToValidate="telefone" ErrorMessage="7-10 números necessários" ForeColor="#FF0000" ID="vailtel" runat="servidor" ValidationExpression="[0-9 ]{7,10}" / > < asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="telephone" ErrorMessage="RequiredField" ForeColor="#FF0000" ID="vailtel2" runat="server" / >< /td >
< /tr>
<tr>
< td height="22" >E-mail</td >
< td >< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0033FF" ID="email" runat="server" TextMode="SingleLine" ToolTip="Por favor, insira seu e-mail" largura ="200"/ >< /td >
< td >< asp:regularexpressionvalidator BackColor="#CCCCCC" ControlToValidate="email" ErrorMessage="Invaliar endereço de e-mail" ForeColor="#FF0000" ID="valiemail" runat="server" ValidationExpression=".{1,}@ .{3,}" / > < asp:requiredfieldvalidator BackColor="#CCCCCC" ControlToValidate="email" ErrorMessage="Campo obrigatório" ForeColor="#FF0000" ID="valiemail2" runat="server" / > < /td >
< /tr>
<tr>
< td height="22" colspan="3" >< div align="center" >Comentários</div >< /td >
< /tr>
<tr>
<td height="188" colspan="3" >< div align="center" >
< asp:textbox BackColor="#CCCCCC" BorderWidth="1" ForeColor="#0033FF" ID="Comments" Rows="16" runat="server" TextMode="MultiLine" ToolTip="Insira os comentários" largura ="400"/ >
</div>
< div alinhar="centro" > < br >
< /div >< /td >
< /tr>
<tr>
<td height="71" colspan="3" >< div align="center" >
< asp:validationsummary BackColor="#CCCCCC" DisplayMode="BulletList" ForeColor="#FF0000" HeaderText="Conteúdo incorreto inclui:" ID="valSum" runat="server" ToolTip="Error" / >
< /div >< /td >
< /tr>
<tr>
<td height="22" colspan="3" >< input type="submit" name="Enviar" value="Enviar" >
</ /td >
< /tr>
< /tabela>
O estilo é o seguinte:
[Figura 5-14 Visualização]
PASSO 3 Adição de dados
Quanto à função de adição de dados, é relativamente simples. Podemos definir a função de adição de dados através do assistente e deixar o DreamweaverMX adicionar automaticamente o código. Clique na guia Server Behaviors em Application e, em seguida, clique no botão + para selecionar Insert Record (Figura 5-15).
Na caixa de diálogo pop-up, você deve primeiro determinar a fonte de dados conectada. Se não for encontrado na lista, você pode clicar no botão Definir para definir a fonte de dados (Figura 5-16). Inserir na tabela é usado para definir a tabela à qual os dados precisam ser adicionados. Em Colunas, a caixa de texto pode ser combinada com a fonte de dados correspondente e o tipo de dados pode ser definido. Em caso de sucesso, Ir para define a página para a qual saltar se os dados forem adicionados com sucesso. Em caso de falha, Ir para pode definir a página para a qual saltar se a adição de dados falhar. Ao mesmo tempo, também podemos escolher Exibir informações de depuração em caso de falha para definir a mensagem de erro a ser exibida quando a adição de dados falhar.
[Figura 5-15 Selecione Inserir Registro]
[Figura 5-16 Configurações de adição de dados]
Vejamos o código adicionado:
<MM:Inserir
runat = "servidor"
CommandText='< %# "INSERIR NOS COMENTÁRIOS (COMENTÁRIOS, E-MAIL, PRIMEIRO_NOME, SOBRENOME, TELEFONE) VALORES (?, ?, ?, ?, ?)" % >'
ConnectionString='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_STRING_location") % >'
DatabaseType='< %# System.Configuration.ConfigurationSettings.AppSettings("MM_CONNECTION_DATABASETYPE_location") % >'
Expressão='< %# Request.Form("MM_insert") = "form1" % >'
CreateDataSet="falso"
SuccessURL='< %# "index.htm" % >'
URL de falha='< %# "reg.aspx" % >'
Depurar = "verdadeiro"
>
<Parâmetros>
<Nome do Parâmetro="@COMMENTS" Valor='< %# IIf((Request.Form("Comments") < > Nada), Request.Form("Comments"), "") % >' Type="WChar" />
< Parameter Name="@EMAIL" Valor='< %# IIf((Request.Form("email") < > Nada), Request.Form("email"), "") % >' Type="WChar" />
<Nome do Parâmetro="@FIRST_NAME" Valor='< %# IIf((Request.Form("first") < > Nada), Request.Form("first"), "") % >' Type="WChar" />
<Nome do Parâmetro="@LAST_NAME" Valor='< %# IIf((Request.Form("Sobrenome") < > Nada), Request.Form("Sobrenome"), "") % >' Type="WChar" />
< Parameter Name="@TELEPHONE" Value='< %# IIf((Request.Form("telefone") < > Nada), Request.Form("telefone"), "") % >' Type="WChar" />
< /Parâmetros >
< /MM:Inserir>
MM: Insert é o rótulo usado pelo Dreamweaver para adicionar o banco de dados e Parameter é o valor usado para especificar o parâmetro.
O código anterior é usado para especificar o link do banco de dados e a página para a qual saltar após a adição ser bem-sucedida. Se a adição falhar, uma mensagem de erro será exibida, bem como a tabela associada.
Eles são desenvolvidos pela própria MacroMedia e requerem suporte de alguns componentes da Macromedia. Eles são diferentes do formato de código padrão de muitos ASP.net na Internet hoje. Por favor, não entenda mal o formato de código padrão do ASP.net baseado neste código ao se referir ao código. Você pode consultar www.gotdotnet.com para obter o formato de código padrão. Se você quiser escrever código padrão, você pode usar WebMatrix, endereço de download: http://www.asp.net/webmatrix/download.aspx?tabindex=4