`
Francis.lin
  • 浏览: 4315 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

ValidForm 表单验证插件

阅读更多

<div class="iteye-blog-content-contain" style="font-size: 14px"></div>

ajaxurl:实时验证功能.

例,ajaxurl : "<%=path%>/user/user!randnum.json"

/**
	 * 验证码是否输入成功
	 */
	public void randnum() {

		Map<String, String> hashmap = new HashMap<String, String>();

		HttpSession hs = getHttpSession();

		if (hs.getAttribute("randnum") != null) {

			String s_randnum = (String) hs.getAttribute("randnum");

			if (!model.getParam().equals(s_randnum)) {

				hashmap.put("info", "验证码错误,请重新输入!");
				hashmap.put("status", "n");
			} else {

				hashmap.put("info", "");
				hashmap.put("status", "y");
			}

			model.setMessage_(SystemStatusCode.OPERATE_OK, "get success", "", "验证成功", hashmap);
		}
	}

 

 返回的一定是json数据格式的,{"info":"验证码错误,请重新输入!","status":"n"} 必须有这info和status两个字段,信息自己定义。一般返回这种json格式即可。前台不用再处理,已封装好。

 

密码强度插件:passwordStrength-min.js 引入即可。然后js中加入usePlugin即可.

<script type="text/javascript">
	$(function() {

		var demo = $(".registerform").Validform({
			tiptype : 2,
			showAllError : true,
			label : ".label",
			btnSubmit : "#btn_sub",
			ajaxPost : true,
			postonce : true,
			usePlugin:{
				passwordstrength:{
					minLen:6,//设置密码长度最小值,默认为0;
					maxLen:20,//设置密码长度最大值,默认为30;
					trigger:function(obj,error){
						if(error){
							obj.parent().next().find(".Validform_checktip").show();
							obj.parent().next().find(".passwordStrength").hide();
						}else{
							obj.parent().next().find(".Validform_checktip").hide();
							obj.parent().next().find(".passwordStrength").show();	
						}
					}
				}
			},
			callback : function(data) {
				var userCode = $('#userCode').val();
				if(data.status == "y") {

					var url="<%=path%>/user/user-activating.jsp?userCode="+userCode+"&password="+$('#register_password').val();

					setTimeout(window.location.href = url, 3000);
				}
			}
		});

		demo.addRule([ {
			ele : ".inputxt:eq(0)",
			datatype : "m | e",
			tip : "Email/手机号码",
			nullmsg : "请输入中国大陆手机号或常用邮箱,可用于登录和找回密码",
			errormsg : "手机或邮箱格式有误,请重新输入",
			sucmsg : " ",
			ajaxurl : "<%=path%>/user/user!regis.json"
		}, {
			ele : ".inputxt:eq(1)",
			datatype : "*6-20",
			tip : "昵称",
			nullmsg : "请输入您的昵称",
			sucmsg : " ",
			errormsg : "昵称至少6个字符,最多20个字符!"
		}, {
			ele : ".inputxt:eq(2)",
			datatype : "*6-20",
			sucmsg : " ",
			nullmsg : "请输入您的密码",
		}, {
			ele : ".inputxt:eq(3)",
			datatype : "*6-20",
			recheck : "password",
			nullmsg : "请再输入一次密码",
			sucmsg : " ",
			errormsg : "您两次输入的账号密码不一致"
		}, {
			ele : ".inputxt:eq(4)",
			datatype : "*4-4",
			nullmsg : "请输入验证码",
			errormsg : "验证码输入错误",
			sucmsg : " ",
			ajaxurl : "<%=path%>/user/user!randnum.json"
		}]);
	});
</script>

 

分享到:
评论

相关推荐

    validform表单验证的实现方法

    Validform表单验证插件的优点在于它内置了多种验证格式,同时支持通过URL引入额外的验证数据类型(datatype),这意味着开发者可以根据需要扩展更多自定义的验证规则。 Validform表单验证的核心概念包括datatype...

    jquery 表单验证插件Validform插件制作一行代码搞定整站的jquery表单验证

    jQuery Validform是一款强大的表单验证插件,它以其简洁的API和高度可定制化的特点,在前端开发中广受欢迎。本文将详细介绍如何使用jQuery Validform插件来实现高效、灵活的表单验证。 **一、Validform简介** ...

    jQuery表单验证插件Validform

    **jQuery表单验证插件Validform** 在网页开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,防止错误数据的提交,提高用户体验并减轻服务器端的处理负担。jQuery是一个轻量级、高性能的...

    Jquery表单验证插件–Validform

    **jQuery表单验证插件Validform详解** 在Web开发中,表单验证是必不可少的一环,它能够确保用户输入的数据符合预设的规则,从而提高数据的准确性和系统的稳定性。Validform是一款基于jQuery的轻量级表单验证插件,...

    validform表单验证

    ValidForm是一款强大的JavaScript表单验证插件,专为前端开发者设计,用于实现高效、便捷的表单数据验证。它的核心功能在于提供了一种简洁的方法,让开发者能够在用户提交表单前,对输入的数据进行实时检查,确保...

    jquery表单验证插件Validform框架demo实例代码下载

    **jQuery表单验证插件Validform框架** Validform是一款基于jQuery的强大的表单验证框架,它专注于提供简单、高效、灵活的表单验证解决方案。在Web应用中,表单验证是必不可少的部分,它能确保用户输入的数据符合...

    Validform前端表单验证

    综上所述,Validform是一款强大且易于使用的前端表单验证工具,它提供的多种验证规则、自定义功能和集成的插件,极大地简化了开发者的表单验证工作,提升了用户交互体验。无论是在小型项目还是大型企业级应用中,...

    jquery表单验证插件

    本篇文章将深度探讨“jQuery表单验证插件”,特别是Validform,一个被广泛认可且高效实用的验证工具。 Validform是一款基于jQuery的轻量级表单验证插件,其设计理念在于为开发者提供简单易用、功能全面的表单验证...

    jquery特效插件Validform制作一行代码搞定整站的表单验证

    Validform是基于jQuery的一个高效、强大的表单验证插件,它允许开发者通过一行简单的代码就能实现全站的表单验证。 Validform插件的亮点在于其高度可定制性和灵活性。它可以轻松地处理各种复杂的验证场景,如邮箱...

    表单验证 ValidForm

    ValidForm是一款强大的JavaScript表单验证插件,它专注于提供灵活、高效的前端验证解决方案。通过ValidForm,开发者能够轻松实现对用户输入的多种类型数据进行检查,包括但不限于不能为空、数字、邮政编码、手机号码...

    Validform表单验证总结篇

    ValidForm表单验证工具是一款用于前端页面实现表单验证功能的JavaScript插件,它提供了丰富的验证方法和灵活的配置选项,从而在用户提交表单之前对输入数据进行校验,确保数据的准确性和完整性。ValidForm可以应用在...

    jquery validate和validform验证插件的对比.pdf

    《jQuery Validate与Validform验证插件的对比分析》 在前端开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预期格式,从而提高用户体验和数据准确性。jQuery Validate 和 Validform 是两个广泛...

    jquery validate和validform验证插件的对比.docx

    **jQuery Validate 和 Validform 验证插件对比分析** 在前端开发中,表单验证是不可或缺的一部分,确保用户输入的数据符合预设的规则,提高用户体验并减少服务器端的压力。jQuery Validate 和 Validform 是两个广泛...

    表单验证插件Validform

    **表单验证插件Validform** Validform是一款广泛应用于前端开发中的强大表单验证插件,主要用于提升用户体验,确保用户输入的数据符合预设的规则,从而避免无效或错误的数据提交到服务器。它基于JavaScript和jQuery...

    form.js表单验证插件

    因而找到一款强大、简洁、使用简单的通用验证方案就显得尤为迫切需要,而我编写的form.js就是这样的一款基于Jquery的表单验证插件,一把锋利而又小巧的刀,经过了累积至少60多个工作日的煅造以及无数个验证需求的...

    H-ui.admin_v2.3.1

    │ Validform 表单验证插件 │ zepto zepto库 │ ueditor 百度编辑器 │ Highcharts 图表插件 │ dataTables 表格排序,检索插件 │ WebUploader 百度文件上传组件 │ lightbox2 图片预览组件 │ │ ...

Global site tag (gtag.js) - Google Analytics