suchen

Heim >Web-Frontend >js-Tutorial >jQuery schreibt Beispielcode für ein Verifizierungsformular

jQuery schreibt Beispielcode für ein Verifizierungsformular

零下一度
零下一度Original
2017-07-19 16:58:221240Durchsuche

//Überprüfungsformular geschrieben mit 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>

Das obige ist der detaillierte Inhalt vonjQuery schreibt Beispielcode für ein Verifizierungsformular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Umfassende Erklärung des Jquery-SelektorsNächster Artikel：Umfassende Erklärung des Jquery-Selektors

In Verbindung stehende Artikel

Mehr sehen