首页 / JQUERY / jQuery写验证表单实例代码
jQuery写验证表单实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery写验证表单实例代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2678字,纯文字阅读大概需要4分钟。
内容图文
![jQuery写验证表单实例代码](/upload/InfoBanner/zyjiaocheng/300/38a3725b37464a5ba39c6e09e178350a.jpg)
<!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='high'>*</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 = '请输入正确的格式.'; $parent.append('<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>
以上就是jQuery写验证表单实例代码的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的jQuery写验证表单实例代码全部内容,希望文章能够帮你解决jQuery写验证表单实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。