漂亮的登录注册页+Validate表单验证+自适应手机

所属分类:输入-验证

 65216  592  查看评论 (124)
分享到微信朋友圈
X
漂亮的登录注册页+Validate表单验证+自适应手机 ie兼容10

common.js内包含了jquery.validate表单验证的一些设置,备注比较清楚。加上JQuery扩展插件Validate没有手机的验证方法,给它加了段自定义规则,用正则表达式来判断手机号码是否正确。

//jquery.validate表单验证
$(document).ready(function(){
	//登陆表单验证
	$("#loginForm").validate({
		rules:{
			username:{
				required:true,//必填
				minlength:3, //最少6个字符
				maxlength:32,//最多20个字符
			},
			password:{
				required:true,
				minlength:3, 
				maxlength:32,
			},
		},
		//错误信息提示
		messages:{
			username:{
				required:"必须填写用户名",
				minlength:"用户名至少为3个字符",
				maxlength:"用户名至多为32个字符",
				remote: "用户名已存在",
			},
			password:{
				required:"必须填写密码",
				minlength:"密码至少为3个字符",
				maxlength:"密码至多为32个字符",
			},
		},

	});
	//注册表单验证
	$("#registerForm").validate({
		rules:{
			username:{
				required:true,//必填
				minlength:3, //最少6个字符
				maxlength:32,//最多20个字符
				remote:{
					url:"http://kouss.com/demo/Sharelink/remote.json",//用户名重复检查,别跨域调用
					type:"post",
				},
			},
			password:{
				required:true,
				minlength:3, 
				maxlength:32,
			},
			email:{
				required:true,
				email:true,
			},
			confirm_password:{
				required:true,
				minlength:3,
				equalTo:'.password'
			},
			phone_number:{
				required:true,
				phone_number:true,//自定义的规则
				digits:true,//整数
			}
		},
		//错误信息提示
		messages:{
			username:{
				required:"必须填写用户名",
				minlength:"用户名至少为3个字符",
				maxlength:"用户名至多为32个字符",
				remote: "用户名已存在",
			},
			password:{
				required:"必须填写密码",
				minlength:"密码至少为3个字符",
				maxlength:"密码至多为32个字符",
			},
			email:{
				required:"请输入邮箱地址",
				email: "请输入正确的email地址"
			},
			confirm_password:{
				required: "请再次输入密码",
				minlength: "确认密码不能少于3个字符",
				equalTo: "两次输入密码不一致",//与另一个元素相同
			},
			phone_number:{
				required:"请输入手机号码",
				digits:"请输入正确的手机号码",
			},
		
		},
	});
	//添加自定义验证规则
	jQuery.validator.addMethod("phone_number", function(value, element) { 
		var length = value.length; 
		var phone_number = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ 
		return this.optional(element) || (length == 11 && phone_number.test(value)); 
	}, "手机号码格式错误");


相关插件-验证

jQuery屏幕解锁插件patternLock.js

屏幕解锁基于HTML,jQuery和CSS,模拟混合应用程序设计。
  验证
 11188  157

Modern Fms 表单验证插件

Modern Fms(精美的纯css3 html5表单框架) 表单验证插件
  验证
 3788  37

原生js表单验证(原创)

轻量级,原生js打造表单验证,易上手
  验证
 3346  40

漂亮的登录注册页+Validate表单验证+自适应手机

在“漂亮的登录页+滑动弹出框+js正则验证”的基础上,添加自适应样式和优化输入时体验,增加Validate的表单验证
  验证
 65217  592

讨论这个项目(124)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ╇★THE Future`?灬 0
    2019/8/28 11:01:07
    怎么去除里面的广告啊 回复
    Simg 0
    2019/7/4 17:52:08
    小白20180113 0
    2018/11/14 20:34:08
    Allen Ye 0
    2018/10/26 10:25:41
    可以给我发一份嘛 回复
    メ宇╃ 0
    2018/6/29 13:47:25
    battle-seasoned 0
    2018/6/1 18:07:13
    霸波奔 0
    2018/4/14 20:14:52
    l轮播图片的效果不错
        然后微微笑0
        2018/5/28 0:17:58
    回复
    33oN ??120°E 0
    2018/1/29 9:30:30

    大佬,Failed to load resource: net::ERR_CONNECTION_RESET,点击注册以后,我在浏览器开发者工具里看到这个,是什么问题啊?

    回复
    奥特曼 0
    2018/1/19 10:34:21

    谁有源码麻烦发下[email protected] 学生党急用,谢谢

        33oN ??120°E0
        2018/1/25 10:52:08

        表示可能没有

    回复
    ˇ ? 背 0
    2017/11/23 13:05:50
取消回复