Home > Web Front-end > JS Tutorial > body text

jQuery writes verification form example code

零下一度
Release: 2017-07-19 16:58:22
Original
1207 people have browsed it

//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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!