Home > Article > Web Front-end > jQuery writes verification form example code

jQuery writes verification form example code

零下一度Original: 2017-07-19 16:58:221204browse

//Verification form written using 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>

The above is the detailed content of jQuery writes verification form example code. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Comprehensive explanation of Jquery selectorNext article：Comprehensive explanation of Jquery selector

See more

jQuery writes verification form example code

Related articles