validator插件及手机动态码功能代码

最新推荐文章于 2022-10-25 10:22:24 发布
最新推荐文章于 2022-10-25 10:22:24 发布
阅读量947 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： js javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010407050/article/details/49306715
本文详细介绍了用户注册、登录及忘记密码流程中的验证机制，包括手机号验证、图形验证码及短信验证码的功能实现，确保用户信息安全。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

/**
 * 新 登陆 注册 忘记密码
 */
	//注册
	var register_send_mobileYzm_id="#r_send_mobileYzm_id";//发送按钮
	var register_interValObj; //timer变量，控制时间
	var register_count = 60; //发送验证码间隔时间
	var register_curCount;//当前剩余秒数
	var register_intervalTime=1000;//间隔时间  毫秒数
	//忘记密码
	var forgot_send_mobileYzm_id="#f_send_mobileYzm_id";//发送按钮
	var forgot_interValObj; //timer变量，控制时间
	var forgot_count = 60; //发送验证码间隔时间
	var forgot_curCount;//当前剩余秒数
	var forgot_intervalTime=1000;//间隔时间  毫秒数
	$(function(){
		//手机号码验证
		jQuery.validator.addMethod("mobileVali", function(value, element) {
			return this.optional(element) || /(13[0-9]|15[\d]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(value);
		}, "The specified US ZIP Code is invalid");
		//验证登陆
		$("#form_login_id").validate({
			focusCleanup:true,
			focusInvalid:false,
		    errorClass: "unchecked",
		    validClass: "checked",
		    errorElement: "span",
			submitHandler:function(form){  
				/*显示loading信息*/
				$.ajax({
					type : "post",
					url : "login",
					dataType : "json",
					async: false,
					data:$(form).serialize(),
					success : function(data) {
						if(data.success){
							location.reload();
							$(form).resetForm();
							$("#login_modal_id").modal('hide');
						}else{
							$("#login_modal_body_id #logininfo").show().find("p").html(data.message.errorMessage);
						}
					},
					error : function() {
						swal("服务器异常，请联系管理员!", "", "warning");
					}
				});   
	        }, 
	        rules: {
	        	"client.mobile":{
	        		required: true,
	        		mobileVali:true
	        	},
	        	"client.password":{
	        		required:true
	        	}
	        },
	        messages: {
	        	"client.mobile":{
	        		required: "请输入手机号码",
	        		mobileVali:"请输入正确的手机号"
	        	},
	        	"client.password":{
	        		required:"请输入密码"
	        	}
	        },
	        errorPlacement: function(error, element) 

	        {  
	            $('<br/>').appendTo(element.parent());   
	            error.appendTo(element.parent());

	        },
	        onfocusout: function(element){
	            $(element).valid();
	        }
			
		});
		
		//验证忘记密码
		$("#form_fp_id").validate({
			focusCleanup:true,
			focusInvalid:false,
			errorClass: "unchecked",
			validClass: "checked",
			errorElement: "span",
			submitHandler:function(form){  
			
				/*显示loading信息*/
				$.ajax({
					type : "post",
					url : "forgetPassword",
					dataType : "json",
					async: false,
					data:$(form).serialize(),
					success : function(data) {
						if(data.success){
							swal({title: "修改成功！",text: "", timer: 2000,showConfirmButton:false,type:"success"});
							$(form).resetForm();
							$("#fp_modal_id").modal('hide');
							setTimeout(window.location.href="logout",3000);
						}else{
							$("#fp_modal_body_id #fpinfo").show().find("p").html(data.message.errorMessage);
						}
					},
					error : function() {
						swal("服务器异常，请联系管理员!", "", "warning");
					}
				});  
			}, 
			rules: {
				"client.fmobile":{
					required: true,
					mobileVali:true
				},
				"client.mobileYzm":{
					required:true,
					number:true,
					minlength:4
				},
				"client.newPassword":{
					required:true,
					rangelength:[6,18]
				},
				"client.confirmPassword":{
					required:true,
					equalTo:"#f_newPassword_id"
				}
			},
			messages: {
				"client.fmobile":{
					required: "请输入手机号",
					mobileVali:"请输入正确的手机号"
				},
				"client.mobileYzm":{
					required:"请输入验证码",
					number:"请输入纯数字验证码",
					minlength:"请输入长度为4位的验证码"
					
				},
				"client.newPassword":{
					required:"请输入新密码",
					rangelength:"输入长度必须介于 6 和 18 之间"
				},
				"client.confirmPassword":{
					required:"请输入确认新密码",
					equalTo:"两次密码输入不一致"
				}
			},
			errorPlacement: function(error, element) 
			
			{  
				$('<br/>').appendTo(element.parent());   
				error.appendTo(element.parent());
				
			},
			onfocusout: function(element){
				$(element).valid();
			}
			
		});
		
		//验证注册
		$("#form_register_id").validate({
			focusCleanup:true,
			focusInvalid:false,
			errorClass: "unchecked",
			validClass: "checked",
			errorElement: "span",
			submitHandler:function(form){  
			
				/*显示loading信息*/
				$.ajax({
					type : "post",
					url : "register",
					dataType : "json",
					async: false,
					data:$(form).serialize(),
					success : function(data) {
						if(data.success){
							swal({title: "注册成功！",text: "", timer: 2000,showConfirmButton:false,type:"success"});
							$(form).resetForm();
							$("#fp_modal_id").modal('hide');
							setTimeout("location.reload();",3000);
						}else{
							$("#register_modal_body_id #registeinfo").show().find("p").html(data.message.errorMessage);
						}
					},
					error : function() {
						swal("服务器异常，请联系管理员!", "", "warning");
					}
				});  
			}, 
			rules: {
				"client.mobile":{
					required: true,
					mobileVali:true
				},
				"client.mobileYzm":{
					required:true,
					number:true,
					minlength:4
				},
				"kaptcha":{
					required:true,
					number:true,
					minlength:4,
					remote:{
	                	  url: "checkCaptcha",     //后台处理程序 
	                	  type: "post",               //数据发送方式
	                	  dataType: "json",           //接受数据格式    
	                	  data: {                     //要传递的数据
	                		  kaptcha: function() {
		                		   return $("#r_yanYzm_id").val();
		                	   }
	                	  }
	                }
					
				},
				"client.password":{
					required:true,
					rangelength:[6,18]
				},
				"client.confirmPassword":{
					required:true,
					equalTo:"#r_password_id"
				}
			},
			messages: {
				"client.mobile":{
					required: "请输入手机号",
					mobileVali:"请输入正确的手机号"
				},
				"client.mobileYzm":{
					required:"请输入短信验证码",
					number:"请输入4位数字短信验证码",
					minlength:"请输入长度为4位的短信验证码"
				},
				"kaptcha":{
					required:"请输入图形验证码",
					number:"请输入4位数字图形验证码",
					minlength:"请输入4位数字图形验证码",
					remote:"图形验证码校验失败"
				},
				"client.password":{
					required:"请输入新密码",
					rangelength:"输入长度必须介于 6 和 18 之间"
				},
				"client.confirmPassword":{
					required:"请输入确认新密码",
					equalTo:"两次密码输入不一致"
				}
			},
			errorPlacement: function(error, element) 
			
			{  
				$('<br/>').appendTo(element.parent());   
				error.appendTo(element.parent());
				
			},
			onfocusout: function(element){
				$(element).valid();
			}
			
		});
		
		//注册发送验证码
		$("#r_send_mobileYzm_id").click(function(){
			register_sendMobileCode();
		});
		
		//忘记密码发送验证码
		$("#f_send_mobileYzm_id").click(function(){
			forgot_sendMobileCode();
		});
		//验证提现是否登录绑卡
		$("#memberWithdrawals,#account_tixian_btn").click(function(){
			$.ajax({
				type : "get",
				url : "loadBank",
				dataType : "json",
				async: false,
				success : function(data) {
					if (data.success) {	
						$.ajax({
							type : "get",
							url : "bankCardInfo",
							dataType : "json",
							async: false,
							success : function(data) {
								if (data.success&&data.message!=null&&data.message!="") {
									location.href='member_withdrawals.jsp';
								}else{
									swal({
										  title: "温馨提示",
										  text: "操作前请先绑定本人持有的银行卡，提现会提到该银行卡中",
										  type: "warning",
										  showCancelButton: true,
										  confirmButtonColor: "#5DADFA",					
										  confirmButtonText: "现在就去",
										  cancelButtonText: "不用了",
										  closeOnConfirm: false
										},
										function(){
											location.href='member_bank_add.jsp';
										});
								}
							}
						});	
					}else{
						loginx();
					}
				}
			});	
		});
		
		//验证充值是否登录绑卡
		$("#i_chongzhi_index,#h_chongzhi_header,#feng_chongzhi,#duo_chongzhi,#duo_chongzhi,#feng_chongzhi,#memberRecharge,#account_chongzhi_btn").click(function(){	
			$.ajax({
				type : "get",
				url : "loadBank",
				dataType : "json",
				async: false,
				success : function(data) {
					if (data.success) {	
						$.ajax({
							type : "get",
							url : "bankCardInfo",
							dataType : "json",
							async: false,
							success : function(data) {
								if (data.success&&data.message!=null&&data.message!="") {
									location.href='member_quick_recharge.jsp';
								}else{
									swal({
										  title: "温馨提示",
										  text: "操作前请先绑定本人持有的银行卡，提现会提到该银行卡中",
										  type: "warning",
										  showCancelButton: true,
										  confirmButtonColor: "#5DADFA",					
										  confirmButtonText: "现在就去",
										  cancelButtonText: "不用了",
										  closeOnConfirm: false
										},
										function(){
											location.href='member_bank_add.jsp';
										});
								}
							}
						});	
					}else{
						loginx();
					}
				}
			});	
		});
	});
	//发送手机验证码
	function register_sendMobileCode(){
		var flagMobile = $("#r_mobile_id").valid();
		var flagYan= $("#r_yanYzm_id").valid();
		if(!flagMobile||!flagYan){
			return;
		}
		var mobile=$("#r_mobile_id").val();
		$.ajax({
			type : "post",
			url : "sendMobileCode",
			data : 'client.mobile=' + mobile,
			dataType : "json",
			success : function(data) {
				if (data.success) {
					/*跑秒函数*/
					register_countSeconds();
					
				}else{
					swal(data.message.errorMessage, "", "warning");
				}

			},
			error:function (){
				swal("服务器繁忙，请稍后再试", "", "warning");
			}
		});
	}

	//发送验证码读秒
	function register_countSeconds(){
		register_curCount = register_count;
		$(register_send_mobileYzm_id).unbind();
		$(register_send_mobileYzm_id).val(
				"" + register_curCount + "秒");
		$(register_send_mobileYzm_id).css("background", "#A9A9A9");
		$(register_send_mobileYzm_id).css("color", "#fff")
				.css("font-weight", "bold");

		register_interValObj = setInterval(register_SetRemainTime,
				parseInt(register_intervalTime)); //启动计时器，1秒执行一次
				
	}


	//timer处理函数
	function register_SetRemainTime() {
		if (register_curCount == 0) {
			clearInterval(register_interValObj);//停止计时器
			$(register_send_mobileYzm_id).bind("click",register_sendMobileCode);
			$(register_send_mobileYzm_id).val("重新发送");
			$(register_send_mobileYzm_id).css("background", "#2eb4f1");
			$(register_send_mobileYzm_id).css("color", "#fff").css("font-weight", "bold");
		} else {
			register_curCount--;
			$(register_send_mobileYzm_id).val(
					"" + register_curCount + "秒");
		}

	}
	
	
	//发送手机验证码
	function forgot_sendMobileCode(){
		var flagMobile = $("#f_mobile_id").valid();
		if(!flagMobile){
			return;
		}
		var mobile=$("#f_mobile_id").val();
		$.ajax({
			type : "post",
			url : "sendMobileCode",
			data : 'client.mobile=' + mobile,
			dataType : "json",
			success : function(data) {
				if (data.success) {
					/*跑秒函数*/
					forgot_countSeconds();
					
				}else{
					swal(data.message.errorMessage, "", "warning");
				}

			},
			error:function (){
				swal("服务器繁忙，请稍后再试", "", "warning");
			}
		});
	}

	//发送验证码读秒
	function forgot_countSeconds(){
		forgot_curCount = forgot_count;
		$(forgot_send_mobileYzm_id).unbind();
		$(forgot_send_mobileYzm_id).val(
				"" + forgot_curCount + "秒");
		$(forgot_send_mobileYzm_id).css("background", "#A9A9A9");
		$(forgot_send_mobileYzm_id).css("color", "#fff")
				.css("font-weight", "bold");

		forgot_interValObj = setInterval(forgot_SetRemainTime,
				parseInt(forgot_intervalTime)); //启动计时器，1秒执行一次
				
	}


	//timer处理函数
	function forgot_SetRemainTime() {
		if (forgot_curCount == 0) {
			clearInterval(forgot_interValObj);//停止计时器
			$(forgot_send_mobileYzm_id).bind("click",forgot_sendMobileCode);
			$(forgot_send_mobileYzm_id).val("重新发送");
			$(forgot_send_mobileYzm_id).css("background", "#2eb4f1");
			$(forgot_send_mobileYzm_id).css("color", "#fff").css("font-weight", "bold");
		} else {
			forgot_curCount--;
			$(forgot_send_mobileYzm_id).val(
					"" + forgot_curCount + "秒");
		}

	}
	
	
	
	
	//弹出登陆窗口
	function loginx(){
		/*隐藏注册窗口*/
		$("#register_modal_id").modal("hide");
		/*隐藏忘记密码窗口*/
		$("#fp_modal_id").modal("hide");	
		setTimeout(function() {
			$("#login_modal_id").modal();
		}, 500);
	}
	
	
	/*弹出注册窗口*/
	function register(){
		$("#fp_modal_id").modal("hide");
		$("#login_modal_id").modal("hide");
		/*弹出注册窗口*/
		setTimeout(function() {
			$("#register_modal_id").modal();
		}, 500);
		 
	}
	//弹出忘记密码
	function forget_password(){
		$("#register_modal_id").modal("hide");
		$("#login_modal_id").modal('hide');
		setTimeout(function() {
			$("#fp_modal_id").modal();
		}, 500);
		
	}
	
	//检查是否登录
	function yourfunction(jsp){
		$.ajax({
			type : "get",
			url : "loadBank",
			dataType : "json",
			async: false,
			success : function(data) {
				if (data.success) {
					window.location.href = jsp;
				}else{
					loginx();
				}
			}
		});	
	}
	
/*	function indexBannerShow(){
		
	}*/


css

span.checked{
  padding: 0px 5px 0px 25px;
  margin-left: 20px;
  margin-top: 15px;
  margin-bottom: 3px;
  display:inline;
  position:absolute;
  width:30px;
  height: 12px;
  line-height:25px;
  font-size: 12px;
  text-align: left;
  color: #E6594E;
  background: url("../img/common/acion2.png") no-repeat 3px; /* #FCEAE8 */
}
/* span.unchecked{
  padding: 0px 5px 0px 25px;
  display:block;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 3px;
  height: 23px;
  line-height:23px;
  font-size: 12px;
  border: 1px solid #E6594E;
  white-space: nowrap;
  text-align: left;
  color: #E6594E;
  background: #FCEAE8 url("../img/common/acion.png") no-repeat 3px;
} */

span.unchecked{
  padding: 0px 5px 0px 10px;
  display:block;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 3px; text-indent:1.5em;
  height: 34px;
  line-height:34px;
  font-size: 14px;
  font-weight:bold;
  white-space: nowrap;
  text-align: left;
  color: #E6594E;
  background:url("../img/common/gantanhao.png") no-repeat 3px;
}


fastadmin管理员页面实现手机验证码登录功能-腾讯云短信插件
向宇
03-17 3766
fastadmin管理员页面实现手机验证码登录功能-腾讯云短信插件
PC端动态演示手机屏幕的源码
04-15
PC端动态演示手机屏幕的源码 将PC端的动态影像显示在手机屏幕上
【移动安全基础篇】——32、Android动态代码自修改实现
Fly_鹏程万里
01-19 1037
一、 法 方法 11. Jni Bridge Jni 提供了让我们在 C++代码层中直接操作 Dalvik(java)数据的接口。我们可以在 jni 中直接操作相关的数据，修改 Android 中的代码。 Android 源码中的实现：dalvik/vm/jni.cpp 2. Object  结构体 Android 源码位置：dalvik/vm/oo/ObjectAndroid 运行时，解析...
动态qq代码android,原创安卓手机QQ7.0登录界面动态背景视频实现方案
weixin_35879114的博客
05-25 676
分析qq7.0:视频在打开登录界面就开始播放 了，而且期间无黑屏而且是循环播放的画质问题这里就不说了，这个看视频源了。可以让不规则的宽高各种宽高不定的视频比例 以及视频大小都能 适应任意安卓手机的宽高 包括平板，且不留任何缝隙播放器控件选取:解决的是手机适配的问题,另外是播放器控件，这里选择系统播放器比较好. 因为有些播放器不支持读取asset文件夹的Uri比如七牛的视频加载速度比较慢第一帧用图片...
swal弹窗html,js插件---弹出层sweetalert2（总结）
weixin_39867066的博客
07-01 5117
js插件---弹出层sweetalert2(总结)一、总结一句话总结：sweetalert2的效果非常好，效果比较Q萌，移动端适配也比较好，感觉比layer.js效果好点1、SweetAlert2和SweetAlert的区别？SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素...
8、Forbidden (CSRF token missing or incorrect.): /register/
Erudite_x的博客
03-22 498
遇到的问题 Forbidden (CSRF token missing or incorrect.): /register/ 解决办法 是因为本人在写Ajax的时候， data: $(’#regForm’).serialize(),少写了一个“#” 希望对各位有帮助，敲代码一定要细心！
BootStrapValidator与My97日期校验的实例代码
01-20
总的来说，这个实例展示了如何利用BootstrapValidator的灵活性和My97日期插件的强大功能，实现一个动态的、实时的日期校验功能。通过结合使用这两种工具，开发者可以创建出用户体验良好、数据准确的交互式表单，提高...
validator页面验证插件
11-19
1. **自定义验证规则**：Validator插件允许开发者定义自己的验证规则，比如邮箱格式、手机号码、身份证号等，灵活适应各种场景需求。 2. **实时反馈**：在用户输入时，插件能够实时检测并显示错误提示，提高交互...
jQuery 表单检验插件 ez validator v1.1 for PHPCMS2008.rar
07-14
"demo"文件夹内通常包含实际运行的示例代码，用于展示插件的各种功能和用法。开发者可以通过查看和运行这些示例，直观地了解插件的运作机制，以及如何与PHPCMS2008系统进行交互。在调试和学习过程中，这个部分尤其...
bootStrapValidator
05-25
BootstrapValidator是一款基于Bootstrap框架的前端验证插件，用于在用户提交表单前验证输入的数据，确保数据的完整性和正确性。这款插件以其简洁的API和丰富的验证规则，深受前端开发者的喜爱。在Bootstrap的优雅...
数据校验的步骤
weixin_46709007的博客
10-25 740
vue手机号码和身份证校验（居民身份证才有触发规则）
Validator 使用总结
热门推荐
程序猿-HZQ
06-13 5万+
介绍 首先说下大家常用的hibernate-validator，它是对JSR-303/JSR-349标准的实现，然后spring为了给开发者提供便捷集成了hibernate-validator，默认在springmvc模块。 依赖 本文所介绍皆在springboot应用的基础上，首先加上web模块： &lt;dependency&gt; &lt;groupId&gt;org...
swal弹框后input标签获得焦点
wanghonghai80的博客
04-27 3426
swal({      title: "用户名",      text: "用户名不能为空",      type: "error",      showCancelButton: true,      closeOnConfirm: false,      confirmButtonText: "我知道了",      confirmButtonColor: "#ec6c62" 
Atom动态代码插件Activate Power Mode常用设置
lu12077的博客
10-04 1133
相信用过Atom的人都知道它很方便，那么小编在这就介绍下Activate Power Mode插件的一些实用设置如下：效果的起步阈值：刚装上插件后，效果是你按了20个代码后才有动态效果，在这里可以修改为立马有动态效果目录：Setting/Combo Mode中找Combo Mode-Activation Threshold 动态效果的声音调节：小编吐槽以下，我网上百度了下怎么调节声音大小，结果就没
SweetAlert2.js 模态消息使用入门
lss0555的博客
01-14 3431
一.前言 SweetAlert2是一款功能强大的纯Js模态消息对话框插件。SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，SweetAlert2是SweetAlert-js的升级版本，它解决了SweetAlert-js中不能嵌入HTML标签的问题，并对弹出对话框进行了优化，同时提供对各种表单元素的支持，还增加了5种情景模式的模态对话框...
手机登入注册为什么出现这个错误？
Camel
02-14 930
一点击登入 出现这个错误 我想要把页面输入的手机号 存到数据库中login_phone 数据库 CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id', `login_phone` int(11) NOT NULL COMMENT '手机登录', `username` varchar(0...
springboot接口接参注解详解 controller @Valid
hanjiaqian的博客
10-16 2329
为什么要用validator javax.validation的一系列注解可以帮我们完成参数校验,免去繁琐的串行校验 不然我们的代码就像下面这样 // http://localhost:8080/api/user/save/serial /** * 走串行校验 * * @param userVO * @return */ @PostMapping("/save/serial") public Object save(@Re
GB28181国标错误码整理
zuiyijiangnan的博客
02-18 2万+
错误码定义 错误码 错误码宏定义 说明 0 ERR_COMMON_SUCCEED 执行成功 1 ERR_COMMON_FAIL 执行失败 2 ERR_COMMON_INVALID_PARAM 输入参数非法 3 ERR_COMMON_NO_MEMORY 系统内存不足 4 ERR_COMMON_SYS_FAIL 系统通用错误 5 ERR_COMMON_IE_NOT_EXIST IE不...
jQuery动态验证码插件 - MotionCAPTCHA
weixin_33785108的博客
08-22 222
转自 给力技术 jQuery动态验证码插件 - MotionCAPTCHA 推荐一个很另类很给力的 jQuery验证码插件，此验证码是显示一个图形，用户要照着图形画出来才算验证通过。 　　这个插件确实很与众不同，也挺有意思，对于使用触摸设备的用户会很方便。此插件目前的版本只是在客户端进行验证，在以后的版本中会增加服务端验证的支持，以及更多的浏...
提供商品信息表单验证功能的jQuery代码
- **Validator插件**：这是另一个流行的jQuery表单验证插件，拥有与Validation相似的功能。 使用这些插件可以快速设置验证规则，并通过简单的配置即可实现复杂的验证逻辑。 #### 3. 表单事件处理 在用户填写表单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值