recherche

Maison >interface Web >js tutoriel >jQuery écrit un exemple de code de formulaire de vérification

jQuery écrit un exemple de code de formulaire de vérification

零下一度
零下一度original
2017-07-19 16:58:221239parcourir

//Formulaire de vérification écrit avec jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "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></title><script src="js/jquery-1.3.1.js?1.1.11"></script><script src="js/lib/jquery.validate.js?1.1.11"></script><script src="js/lib/jquery.validate.messages_cn.js?1.1.11"></script><style>body {font: 12px/19px Arial, Helvetica, sans-serif;color: #666;}form div {margin: 5px 0;}.int label {float: left;width: 100px;text-align: right;}.int input {padding: 1px 1px;border: 1px solid #ccc;height: 16px;}.sub {padding-left: 100px;}.sub input {margin-right: 10px;}.formtips {width: 200px;margin: 2px;padding: 2px;}.onError {background: #FFE0E9 url(images/reg3.gif) no-repeat 0 center;padding-left: 25px;}.onSuccess {background: #E9FBEB url(images/reg4.gif) no-repeat 0 center;padding-left: 25px;}.high {color: red;}</style><script>$(function () {
            $("form :input.required").each(function () {var $required = $("<strong class=&#39;high&#39;>*</strong>");
                $(this).parent().append($required);
            })
            $("form :input").blur(function () {var $parent = $(this).parent();
                $(".formtips").remove();if ($(this).is("#username")) {if (this.value == '' || this.value.length < 6) {var errmsg = &#39;请输入正确的格式.&#39;;
                        $parent.append(&#39;<span class="formtips onError">' + errmsg + '</span>')
                    } else {var sucssemsg = '格式输入正确';
                        $parent.append('<span class="formtips onSuccess">' + sucssemsg + '</span>')
                    }
                }if ($(this).is("#email")) {//邮箱格式正则表达式的用法if (this.value == '' || ( this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )) {var errmsg = '请输入正确的格式.';
                        $parent.append('<span class="formtips onError">' + errmsg + '</span>')
                    } else {var sucssemsg = '格式输入正确';
                        $parent.append('<span class="formtips onSuccess">' + sucssemsg + '</span>')
                    }
                }
            })
            $("#send").click(function () {var onerr = $(this).parent().siblings().children().hasClass("onError");//出错就会添加class为onerror的元素if(onerr) {return false;
                    } else {
                        alert("你已经注册成功了");
                    }
                }
            )
            $("#reset").click(function () {
                $(".formtips").remove();
            })
        })</script></head><body><form method="post" action=""><div class="int"><label for="username">用户名:</label><input type="text" id="username" class="required"/></div><div class="int"><label for="email">邮箱:</label><input type="text" id="email" class="required"/></div><div class="int"><label for="personinfo">个人资料:</label><input type="text" id="personinfo"/></div><div class="sub"><input type="submit" value="提交" id="send"/><input type="reset" id="res"/></div></form></body></html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication complète du sélecteur JqueryArticle suivant：Explication complète du sélecteur Jquery

Articles Liés

Voir plus