Este artigo descreve o método de JS para verificação de formulário. Compartilhe para sua referência. O método de implementação específico é o seguinte:
1. Código de verificação de formulário tradicional
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Verificação do formulário </title>
<script type = "text/javascript">
função $ (id) {
retornar document.getElementById (id);
}
função check () {
var email = $ ("email"). valor;
var senha = $ ("senha"). Valor;
var repassword = $ ("repassword"). value;
var name = $ ("nome"). valor;
if (email == "") {
alerta ("valor de email não pode estar vazio");
$ ("email"). Focus ();
retornar falso;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
alerta ("o formato da caixa de correio está incorreto, deve incluir @ e.");
$ ("email"). Focus ();
retornar falso;
}
if (senha == "") {
alerta ("A senha não pode estar vazia");
$ ("senha"). Focus ();
retornar falso;
}
if (senha.length <6) {
alerta ("o comprimento da senha deve ser maior ou igual a 6");
$ ("senha"). Focus ();
retornar falso;
}
if (repassword! = senha) {
alerta ("a senha inserida duas vezes é inconsistente");
$ ("Repassword"). Focus ();
retornar falso;
}
if (nome == "") {
alerta ("o nome não pode estar vazio");
$ ("nome"). foco ();
retornar falso;
}
for (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
alerta ('o nome não pode conter números');
$ ("nome"). foco ();
retornar falso;
}
}
}
</script>
</head>
<Body>
<Form Name = "Login_Form" Method = "Post" OnsubMit = "Return check ()">
<div>
Email: <input type = "text" name = "email" id = "email"/>
</div>
<div>
Senha: <input type = "senha" name = "senha" id = "senha" />
</div>
<div>
Digite a senha: <input type = "senha" name = "repassword" id = "repassword" />
</div>
<div>
Nome: <input type = "text" name = "name" id = "name" />
</div>
<div>
<input type = "submit" value = "registro" />
</div>
</morm>
</body>
</html>
2. Verificação do formulário com informações rápidas por trás da caixa de entrada
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Verificação do formulário </title>
<script type = "text/javascript">
função $ (id) {
retornar document.getElementById (id);
}
função check () {
var email = $ ("email"). valor;
var senha = $ ("senha"). Valor;
var repassword = $ ("repassword"). value;
var name = $ ("nome"). valor;
$ ("EmailInfo"). Innerhtml = "";
$ ("PasswordInfo"). Innerhtml = "";
$ ("repasswordInfo"). innerhtml = "";
$ ("nameinfo"). innerhtml = "";
if (email == "") {
$ ("EmailInfo"). Innerhtml = "O valor de email não pode estar vazio";
$ ("email"). Focus ();
retornar falso;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("EmailInfo"). Innerhtml = "O formato da caixa de correio está incorreto, deve incluir @ e.";
$ ("email"). Focus ();
retornar falso;
}
if (senha == "") {
$ ("PasswordInfo"). Innerhtml = "A senha não pode estar vazia";
$ ("senha"). Focus ();
retornar falso;
}
if (senha.length <6) {
$ ("PasswordInfo"). Innerhtml = "O comprimento da senha deve ser maior ou igual a 6";
$ ("senha"). Focus ();
retornar falso;
}
if (repassword! = senha) {
$ ("RepasswordInfo"). Innerhtml = "A senha inserida duas vezes é inconsistente";
$ ("Repassword"). Focus ();
retornar falso;
}
if (nome == "") {
$ ("nameinfo"). innerhtml = "o nome não pode estar vazio";
$ ("nome"). foco ();
retornar falso;
}
for (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("NameInfo"). Innerhtml = 'O nome não pode conter números';
$ ("nome"). foco ();
retornar falso;
}
}
}
</script>
</head>
<Body>
<Form Name = "Login_Form" Method = "Post" OnsubMit = "Return check ()">
<div>
E -mail: <input type = "text" name = "email" id = "email"/> <span id = "emailinfo"> </span>
</div>
<div>
Senha: <input type = "senha" name = "senha" id = "senha" /> <span id = "passwordInfo"> < /span>
</div>
<div>
Digite a senha: <input type = "senha" name = "repassword" id = "repassword" /> <span id = "repasswordInfo"> < /span>
</div>
<div>
Nome: <input type = "text" name = "name" id = "name" /> <span id = "nameinfo"> < /span>
</div>
<div>
<input type = "submit" value = "registro" />
</div>
</morm>
</body>
</html>
As renderizações são as seguintes:
3. Aproveite a função de verificação quando a caixa de entrada perde foco
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Verificação do formulário </title>
<script type = "text/javascript">
função $ (id) {
retornar document.getElementById (id);
}
função check () {
var email = $ ("email"). valor;
var senha = $ ("senha"). Valor;
var repassword = $ ("repassword"). value;
var name = $ ("nome"). valor;
$ ("EmailInfo"). Innerhtml = "";
$ ("PasswordInfo"). Innerhtml = "";
$ ("repasswordInfo"). innerhtml = "";
$ ("nameinfo"). innerhtml = "";
if (email == "") {
$ ("EmailInfo"). Innerhtml = "O valor de email não pode estar vazio";
retornar falso;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("EmailInfo"). Innerhtml = "O formato da caixa de correio está incorreto, deve incluir @ e.";
retornar falso;
}
if (senha == "") {
$ ("PasswordInfo"). Innerhtml = "A senha não pode estar vazia";
retornar falso;
}
if (senha.length <6) {
$ ("PasswordInfo"). Innerhtml = "O comprimento da senha deve ser maior ou igual a 6";
retornar falso;
}
if (repassword! = senha) {
$ ("RepasswordInfo"). Innerhtml = "A senha inserida duas vezes é inconsistente";
retornar falso;
}
if (nome == "") {
$ ("nameinfo"). innerhtml = "o nome não pode estar vazio";
retornar falso;
}
for (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("NameInfo"). Innerhtml = 'O nome não pode conter números';
retornar falso;
}
}
}
função checkEMAIL () {// Verifique o email
$ ('emailinfo'). innerhtml = "";
var email = $ ('email'). valor;
if (email == "") {
$ ('emailInfo'). innerhtml = "o valor do email não pode estar vazio";
retornar falso;
}
if (email.indexof ('@') == -1 || email.indexof ('.') == -1) {
$ ('emailInfo'). innerhtml = "O email deve conter @ e.";
retornar falso;
}
}
função checkpassword () {// Verifique a senha
$ ('PasswordInfo'). Innerhtml = "";
var senha = $ ('senha').
if (senha == "") {
$ ("PasswordInfo"). Innerhtml = "A senha não pode estar vazia";
retornar falso;
}
if (senha.length <6) {
$ ("PasswordInfo"). Innerhtml = "O comprimento da senha deve ser maior ou igual a 6";
retornar falso;
}
}
função checkrepassword () {// Verifique a senha reentrada
$ ('Repassword'). Innerhtml = "";
var repassword = $ ('repassword'). value;
if (repassword! = senha) {
$ ("RepasswordInfo"). Innerhtml = "A senha inserida duas vezes é inconsistente";
retornar falso;
}
}
função checkName () {// Nome de verificação
$ ('NameInfo'). Innerhtml = "";
var name = $ ('nome'). valor;
if (nome == "") {
$ ("nameinfo"). innerhtml = "o nome não pode estar vazio";
retornar falso;
}
for (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("NameInfo"). Innerhtml = 'O nome não pode conter números';
retornar falso;
}
}
}
</script>
</head>
<Body>
<Form Name = "Login_Form" Method = "Post" OnsubMit = "Return check ()">
<div>
Email: <input type = "text" name = "email" id = "email" onblur = "checkEmail ();"/> <span id = "emailinfo"> </span>
</div>
<div>
Senha: <input type = "senha" name = "senha" id = "senha" onblur = "checkpassword ();"/> <span id = "passwordInfo"> </span>
</div>
<div>
Digite a senha: <input type = "senha" name = "repassword" id = "repassword" onblur = "checkRespordword ();"/> <span id = "repasswordinfo"> </span>
</div>
<div>
Nome: <input type = "text" name = "name" id = "name" onblur = "checkName ();"/> <span id = "nameinfo"> </span>
</div>
<div>
<input type = "submit" value = "registro" />
</div>
</morm>
</body>
</html>
As renderizações são as seguintes:
Espero que este artigo seja útil para a programação JavaScript de todos.