Validação de Formulários do JavaScript

A validação de formulários HTML pode ser feita com JavaScript.

Os formulários HTML são geralmente usados para coletar informações do usuário, como nome, endereço de e-mail, localização, idade, etc.

Mas é provável que alguns usuários não entrem os dados que você espera.

Para evitar a aplicação indevida de pressão nos recursos do servidor, você pode usar JavaScript para validar os dados do formulário no cliente (sistema do usuário).

在将输入发送到Web服务器之前，由Web浏览器执行客户端验证。

输入已发送到服务器后，服务器端验证由Web服务器执行。

　　<div class="wrapper">
　　　　<h2>Create an account/h2>
　　　　<label for="username"><b>姓名/b></label>
　　　　<input type="text" placeholder="输入用户名" name="uname" id="username" required>
　　　　<label for="useremail"><b>Email/b></label>
　　　　<input type="email" placeholder="输入Email" name="uemail" id="useremail" required>
　　　　<label for="userpwd1><b>Password/b></label>
　　　　<input type="password" placeholder="输入密码" name="psw" id="userpwd1" required>
　　　　<input type="password" placeholder="确认密码" name="cpsw" id="userpwd2" required>
　　　　<p style="margin-top:　10px;">
　　　　　　　<input type="radio" name="gender" id="female" value="female" checked><label for="female">女/label>
　　　　　　　<input type="radio" name="gender" id="male" value="male"><label for="male">男/label>
　　　　</p>
　　　　<button type="submit">注册</button>/button>
　　</div>
　　<div class="footer">
　　　　<div>已有一个账户? <a href="#">登录</a>/a></div>
　　</div>
</form>
<script>
function validateForm() {
　　let name = document.getElementById("username").value;
　　let email = document.getElementById("useremail").value;
　　let pswd1　= document.getElementById("userpwd1").value;
　　let pswd2　= document.getElementById("userpwd2").value;
　　
　　if(name == "") {
　　　　alert("Name must be filled out");
　　　　return false;
　　}
　　if(email == "") {
　　　　alert("É obrigatório preencher o e-mail");
　　　　return false;
　　}
　　if(pswd1　!== "" || pswd2　!== "") {
　　　　if(pswd1　!== pswd2) {
　　　　　　alert("Password didn't match");
　　　　　　return false;　　　　　　
　　　　}
　　} else {
　　　　alert("A senha deve ser preenchida");
　　　　return false;　　
　　}
　　return true;
}
</script>

Tarefas de verificação típicas são:

• O usuário preencheu todos os campos obrigatórios?

• O usuário inseriu dados válidos?

Neste código, se o campo de entrada (nome de usuário) estiver vazio, esta função exibirá uma mensagem de aviso e retornará false, para evitar o envio do formulário:

　　function validateForm() {
　　let x = document.getElementById("uname").value;
　　if (x == "") {
　　　　alert("O nome deve ser preenchido");
　　　　return false;
　　}
　　}

A função pode ser chamada ao enviar o formulário:

<form action="form-action.html" onsubmit="return validateForm()" method="POST">
　　<label for="uname">Nome:</label>
　　<input type="text" name="username" id="uname">
　　<input type="submit" value="Enviar">
</form>

Verificação de entrada de números

JavaScript geralmente é usado para verificar entrada de números.

Insira1até10entre os números:

Verificação de entrada de e-mail

JavaScript geralmente é usado para verificar endereços de e-mail.

Insira um endereço de e-mail válido:

Verificação de confirmação de senha

JavaScript geralmente é usado para correspondência de confirmação de senha.

Verificação de formulário HTML automática

Verificação de formulário HTML pode usarObrigatórioA propriedade é executada automaticamente:

<input type="text" name="demo" required>

Alterar tipo de entrada

Você pode usar javascript para alternar entre <input type="password"> e <input type="text">.

Insira um valor no campo de senha e, em seguida, clique no botão 'Mostrar senha':

Atributos de validação de entrada HTML

HTML5Introduziu os seguintes novos atributos HTML:

Seletores pseudo de validação CSS

CSS3Introduziu os seguintes novos seletores pseudo-CSS:

Atenção:A validação do cliente não pode substituir ou substituir a validação do servidor. Mesmo que os dados do formulário sejam validados pelo usuário, os dados do formulário devem sempre ser validados no servidor, pois os usuários podem desativar o JavaScript no seu navegador.