jquery响应式登录注册忘记密码表单验证特效

简单好用的表单和联系人管理工具

jquery响应式登录注册忘记密码表单验证特效，这个作品非常实用，集登录表单，注册表单，忘记密码，弹出层，表单验证，提示层，响应式等效果一身的作品，直接就可以拿来使用，只要换上自己的内容即可。。。。

分类：表单代码 > 注册登录框难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

首先引入jquery库和login插件。

<link rel="stylesheet" href="style/css/reset.css"/>
<link rel="stylesheet" href="style/css/global.css"/>
<link rel="stylesheet" href="style/css/component.css"/>
<link rel="stylesheet" href="style/css/login.css"/>
<script src="style/js/jquery-1.8.2.min.js"></script>
<script src="style/js/jquery.cookie.js"></script>
<script src="style/js/jquery.validate.js"></script>
<script src="style/js/jquery.metadata.js"></script>
<script src="style/js/jquery.validate.message_cn.js"></script>
<script src="style/js/jquery.nicescroll.min.js"></script>
<script src="style/js/mgTextWidth.js"></script>
<script src="style/js/tinybox.js"></script>
<script src="style/js/global.js"></script>
<script src="style/js/components.js"></script>
<script src="style/js/md5.js"></script>
<script src="style/js/login.js"></script>

.login_form_header下加两个tab就可以了

<div class="login_form_header">
    <p class="p_login login_active">登录</p>
    <p class="p_register"><span class="img_register"></span>注册</p>
    <div class="clearB"></div>
</div>

最主要的就是表单验证样子功能都不错啊！

var cnmsg = {
	required: "此项为必填项",
	remote: "请修正该字段",
	email: "请输入正确格式的电子邮件",
	url: "请输入合法的网址",
	date: "请输入合法的日期",
	dateISO: "请输入合法的日期 (ISO).",
	number: "请输入合法的数字",
	phone: "请输入正确格式的号码",
	chrnum: "只能输入数字和字母",
	digits: "只能输入整数",
	creditcard: "请输入合法的信用卡号",
	equalTo: "两次输入不同，请重新输入",
	accept: "请输入拥有合法后缀名的字符串",
	maxlength: jQuery.format("长度最多为 {0} "),
	minlength: jQuery.format("长度最少是 {0} "),
	rangelength: jQuery.format("长度应介于 {0} 和 {1} "),
	range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"), 
	max: jQuery.format("请输入一个最大为 {0} 的值"),
	min: jQuery.format("请输入一个最小为 {0} 的值")};
jQuery.extend(jQuery.validator.messages, cnmsg);