用户注册验证_基于jquery validate

最新推荐文章于 2021-02-08 18:18:00 发布
最新推荐文章于 2021-02-08 18:18:00 发布
阅读量598 收藏 1
点赞数 1
分类专栏： 工作项目

利用jquery validate提供的验证进行用户注册信息校验

1.引入jquery validate提供的js

2.根据需求进行自定义验证：电话,邮箱,身份证号

Namespace.register('com.courseplatform.module.student.input');
	//异步加载学校信息
	function changeArea(areaId) {
		//根据areaId，获取其下面的所有学校
		var url = "schoolWithArea";
		var params = {
			"areaId" : areaId
		};
		$.post(url, params, function(data) {
			var schools = data;
			var html = '<option value="" selected>选择学校</option>';
			for (var i = 0; i < schools.length; i++) {
				html += '<option value="' +  schools[i].id +'">'
						+ schools[i].name + '</option>';
			}
			$("#${pageId}school").html(html);
		}, "json");
	}	
	com.courseplatform.module.student.input={
		doSave : function(){
			if(!$.jxy.validate.valid("${pageId}theForm")){
				return false;
			}
			//异步提交表单数据
			var id=$("#studentId").val();
			
			if($("#addType").val()==''){
				$("#addType").val("0");
			}
			var formData = $("#${pageId}theForm").serialize();	
			var loadIndex = $.jxy.layer.load();
			$.ajax({
			 	type: "POST",
			  	url: "${path}/bd/student/save",
			  	data: formData,
			  	success: function(data){
			  		if($("#addType").val()=='1'){//快速注册
			  			$.jxy.layer.success();
			  			setTimeout("window.location='${path}/lo/login/index';",2000);
			  		}else{//新增用户		  			
			  			setTimeout("window.location='${path}/bd/student/saveSuccess?id="+data+"';",2000);
			  		}
			  	}
			});
		}				
	}

	//身份证验证	
	$(document).ready(function(){	
		$(".headeruser a").remove();
		
		jQuery.validator.addMethod("isPhone", function(value, element) {
		    var length = value.length;
		    return this.optional(element) || ((length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value))|| (/^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/.test(value)));    
		}, "请输入正确的手机号码或座机号");
		jQuery.validator.addMethod("stringCheck", function(value, element) {      
		    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);      
		}, "只能包括中文字、英文字母、数字和下划线");
		
		jQuery.validator.addMethod("isIdCardNo", function(value, element) {      
		    return this.optional(element) || isIdCardNo(value);      
		}, "输入的身份证号有误");
		
		jQuery.validator.addMethod("isChinese", function(value, element) {       
	         return this.optional(element) || /^[\u0391-\uFFE5a-zA-Z]+$/.test(value);       
	    }, "只能包含中文字符、英文字母"); 
		jQuery.validator.addMethod("isEmail", function(value, element) {       
	         return this.optional(element) || /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/.test(value);       
	    }, "输入的电子邮箱有误"); 
		
		function isIdCardNo(num) {
		    var factorArr = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1);
		    var parityBit = new Array("1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2");
		    var varArray = new Array();
		    var intValue;
		    var lngProduct = 0;
		    var intCheckDigit;
		    var intStrLen = num.length;
		    var idNumber = num;
		    // initialize
		    if ((intStrLen != 15) && (intStrLen != 18)) {
		        return false;
		    }
		    // check and set value
		    for (i = 0; i < intStrLen; i++) {
		        varArray[i] = idNumber.charAt(i);
		        if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) {
		            return false;
		        } else if (i < 17) {
		            varArray[i] = varArray[i] * factorArr[i];
		        }
		    }
		    if (intStrLen == 18) {
		        //check date
		        var date8 = idNumber.substring(6, 14);
		        if (isDate8(date8) == false) {
		            return false;
		        }
		        // calculate the sum of the products
		        for (i = 0; i < 17; i++) {
		            lngProduct = lngProduct + varArray[i];
		        }
		        // calculate the check digit
		        intCheckDigit = parityBit[lngProduct % 11];
		        // check last digit
		        if (varArray[17] != intCheckDigit) {
		            return false;
		        }
		    }
		    else {        //length is 15
		        //check date
		        var date6 = idNumber.substring(6, 12);
		        if (isDate6(date6) == false) {
		            return false;
		        }
		    }
		    return true;
		}		
		function isDate6(sDate) {
		    if (!/^[0-9]{6}$/.test(sDate)) {
		        return false;
		    }
		    var year, month, day;
		    year = sDate.substring(0, 4);
		    month = sDate.substring(4, 6);
		    if (year < 1700 || year > 2500) return false
		    if (month < 1 || month > 12) return false
		    return true
		}
		function isDate8(sDate) {
		    if (!/^[0-9]{8}$/.test(sDate)) {
		        return false;
		    }
		    var year, month, day;
		    year = sDate.substring(0, 4);
		    month = sDate.substring(4, 6);
		    day = sDate.substring(6, 8);
		    var iaMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
		    if (year < 1700 || year > 2500) return false
		    if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1] = 29;
		    if (month < 1 || month > 12) return false
		    if (day < 1 || day > iaMonthDays[month - 1]) return false
		    return true
		}		
		var validateOptions = {
             rules : {
            	 "name" : {
                     required : true,
                     maxlength:10,
                     isChinese: true
                 },
				"birthDate":{
					 required : true
                 },
                 "parentPhone1" : {
                     required : true,
                     isPhone : true
                 },
                 "parentPhone2" : {
                     isPhone : true
                 },
                 "identityCard" : {
                     required:true,
                     isIdCardNo:true,
                     remote:{
                         url: "${path}/bd/student/idCardValidate",
                         type: "POST",
                         dataType: 'json',
                         data: {
                        	 identityCard: function() {
                 				return $("#identityCard").val();
                    		 	},                       	 
                    		 id: function() {
                 				return $("#studentId").val();
                    		 	}
                      		}
                     }
                 },
                 "email" : {
                	 required: true,
                	 email: true,
                	 isEmail: true
                 },
                 "password": {
                     required: true,
                     maxlength:25,
                     minlength: 5,
                     stringCheck: true
                 },
                 "confirm_password": {
                     required: true,
                     minlength: 5,
                     equalTo: "#password"
                 }                 
            },
			messages:{
				"parentPhone1":{
					required:"请至少填写一位家长联系方式"
	            },
				"birthDate":{
					required:"必须填写学生的出生日期"
	            },
	            "confirm_password":{
	            	equalTo:"两次输入的密码不正确"
	            },
	            "identityCard":{
	            	remote :"该用户已经注册过"
	            },
	            "password":{	            	
	            	minlength: "密码至少是5个字符串组成"
	            }
			}
     	}	
     	$.jxy.validate.init("${pageId}theForm", validateOptions);
	});
</script>
</head>
<body>	
	<%@ include file="/business/common/jsp/header.jsp"%>
	<div class="regTit">学生个人信息注册</div>
	<div class="regCon">
		<div class="regForm">
			<form method="post" action="save" id="${pageId}theForm">
				<input type="hidden" id="studentId" value="${student.id}" name="id">
				<input type="hidden" id="addType"  name="addType" value="${addType}">				
				<div class="formLayout">
					<div class="formTit">
						 姓名:
					</div>
					<div class="formMain">
						<input id="name" name="name" maxlength="10" class="required"
							type="text" value="${student.name}"><span>*</span>
					</div>
				</div>
				<div class="formLayout">
					<div class="formTit">性别:</div>
					<div class="formMain" id="radio">
						<label for="nan"><input id="gender_male" value="0" name="sex" type="radio" required="" <c:if test="${student.sex==null or student.sex=='0'}">checked="checked"</c:if>/>男</label>
						<label for="nv"> <input id="gender_female" value="1" name="sex" type="radio"<c:if test="${student.sex=='1'}">checked="checked"</c:if>/>女</label>
					</div>
				</div>
				<div class="formLayout">
					<div class="formTit">所在学校:</div>
					<div class="formMain">
						<select οnchange="changeArea(this.value)" id="${pageId}area" name="school.area.id" class="selectStyle" style="height: 28px">
							<option value="">选择所在区</option>
							<c:forEach items="${areas}" var="area">
								<option value="${area.id }" <c:if test='${student.school.area.id eq area.id}'>selected="selected"</c:if>>${area.name}</option>
							</c:forEach>
						</select> 
						
						<select id="${pageId}school" name="school.id" required="" style="height: 28px">
							<option value="" selected >选择学校</option>
							<c:forEach items="${schools}" var="school">
								<option value="${school.id}" <c:if test='${student.school.id eq school.id}'>selected="selected"</c:if> >${school.name}</option>
							</c:forEach>
						</select>
						<span>*</span>
					</div>
				</div>
				<div class="formLayout">
					<div class="formTit">
						出生日期：
					</div>
					<div class="formMain">
						<div style="display:inline-block">
							<jxy:dateSelect name="birthDate"  id="birthDate" dateFmt="yyyy-MM-dd" dateValue="${student.birthDate}" styleClass="required"></jxy:dateSelect>
						</div>
						<span>*</span>
						
					</div>
				</div>
				<div class="formLayout">
					<div class="formTit">家长电话1:</div>
					<div class="formMain">
						<input id="parentPhone1" type="text" name="parentPhone1" maxlength="25" class="required" value="${student.parentPhone1}"/><span>*</span>
					</div>
				</div>
				<div class="formLayout">
					<div class="formTit">家长电话2:</div>
					<div class="formMain"><input id="parentPhone2" type="text" maxlength="25" name="parentPhone2" value="${student.parentPhone2}"/>
					</div>
				</div>
				<div class="formLayout">
					<div class="formTit">身份证号:</div>
					<div class="formMain"><input id="identityCard" maxlength="25" name="identityCard" class="required" type="text" value="${student.identityCard}" /><span>*</span>
					</div>
				</div>
				<div class="formLayout">
					<div class="formTit">电子邮箱:</div>
					<div class="formMain">
						<input id="email" name="email" maxlength="50" class="required email" type="text" value="${student.email}" /><span>*</span>
					</div>
				</div>
				<c:if test="${student==null}">
				<div class="formLayout">
						<div class="formTit">密码:</div>
						<div class="formMain">
							<input id="password" name="password" minlength="5" maxlength="25" class="required" type="password"><span>*</span>
						</div>
				</div>
				<div class="formLayout">
					<div class="formTit">确认密码:</div>
					<div class="formMain"> 
						<input id="confirm_password" name="confirm_password" minlength="5" maxlength="25" class="required" equalto="#password" type="password"><span>*</span>
					</div>
				</div>
				</c:if>
			</form>
		</div>
	</div>
	<div class="regFormSubmit" style="text-align: center;">
		<a href="javascript:void(0);" οnclick="com.courseplatform.module.student.input.doSave();" style="display: inline-block;">注册</a>		
		<a href="${path}/lo/login/index" style="display: inline-block;margin-left:20px;">返回</a>
	</div>


温暖_洗衣粉
关注
专栏目录
web应用开发：通过JQuery实现用户注册信息校验
weixin_43916678的博客
03-08 1169
要求： 通过jQuery实现用户注册身份验证，当每个文本框失去焦点时进行该文本框内容校验，并将校验信息在文本框右侧显示出结果。具体校验要求： 用户名由6-18位字符组成 密码由6-18位字符组成，且必须包含字母、数字和标点符号 确认密码必须和密码相同，否则提示密码不一致 电子邮件必须符合电子邮件格式 自我介绍不能为空 用户点击重置时清空所有文本框内容 用户点击提交是将用户信息存入对象user中，...
jquery Validate验证
qq_40108004的博客
10-09 666
一、导入js库 /validate/jquery-1.6.2.min.js"> /validate/jquery.validate.min.js"> 注：返回web项目的根路径。 二、默认校验规则 复制代码 (1)、required:true 必输字段 (2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入
jquery注册用户验证
10-17
在cnblogs上下载的，看着还不错,引用地址http://www.cnblogs.com/wzh2010/archive/2010/10/17/1853345.html
jQuery验证用户注册信息
tacheno的专栏
11-17 407
$.validator.addMethod("dlmString", function(value, element) {     return this.optional(element) || /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(value); }, "只能为中文字母数字或下划线");  $.validator.addMethod("dlmk",
jQuery实现用户注册的表单验证
郭晓湉
04-01 2648
$(function(){   $(":input.required").each(function(){    var $required = $("*");    $(this).parent().append($required);   });   $(":input.required").blur(function(){    //判断一下鼠标离开谁了    if($(thi
jQuery验证注册信息
mohnblume的博客
10-18 148
$().ready(function() { $(’#birthday’).focus(function() {// focus获取焦点 return HS_setDate(this); });// #根据register.jsp页面的id写 KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲userRegisterFor…...
jquery_validate验证
liu_jiang666的博客
02-08 832
jquery_validate的介绍 使用jquery_validate脚本可以进行客户端的信息的验证，使用起来方便快捷，只需要在需要验证的地方引用jquery的js脚本就好了。 jquery_validate 脚本下载 点击下载,如果您是tp框架的使用者，将下载好的压缩包解压在项目目录的public/static下。（小编用来演示的就是tp框架） 引用 引用这三个js脚本 <script src="/static/jQuery_validate/lib/jquery.js"></scri
JQuery validate插件验证用户注册信息
01-19
使用JQuery的validate插件做客户端验证非常方便，下面做一个使用validate插件验证用户注册信息的例子。 本实例使用的是1.5版本。 示例是在SSH下做的，代码如下： registe.jsp <%@ page language=java ...
jQuery Validate插件实现表单验证
12-08
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...
jquery validate表单验证插件制作注册表单提交验证
10-30
在本文中，我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单，进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库，它为HTML表单提供了灵活且易于使用的验证规则，确保用户输入...
jquery实现用户注册表单验证代码
11-30
使用jquery来实现用户注册表单验证html代码
jquery validate表单验证插件制作注册表单验证提交
06-16
jquery validate表单验证插件制作注册表单验证提交
js/jquery登录验证，包含邮箱，电话，QQ,用户名、等各种数据的验证
09-05
自用js登录验证，包含邮箱，电话，QQ,用户名、等各种数据的验证，十分好用，现在封装一户分享给大家
使用jQuery validate 验证注册表单实例演示
12-08
在本文中，我们将深入探讨如何使用jQuery Validate插件来实现一个注册表单的验证实例。...通过熟练掌握jQuery Validate，你可以创建出更加智能和安全的注册表单，提升用户注册流程的效率和满意度。
注册js/jquery验证
ll3527的专栏
05-22 4515
1.首先要思路清晰，下面我说一下思路 首先注册模块有3次验证，一为填写信息完后，离开焦点框时验证，二为点击提交按钮时验证，最后后台验证。 2.错误提示信息有3种状态，正常提示，错误提示，填写正确提示，分别用check,ok,err代替，这里需要写3个css，为了以后好控制。 3.失去焦点进行验证，不正确给提示语的div添加err的class属性，并且修改div的html提示语，正确同理。参照
jquery+jquery.validate用户注册实例
zfy421的专栏
03-02 136
1.页面端my——userlogin.jsp主要代码     script type="text/javascript" src="js/jquery-1.5.2.js"&gt;&lt;/script&gt; &lt;script src="jquery.metadata.js" type="text/javascript"&gt;&lt;/script&gt;
validate完成注册页面表单校验
三个和尚_的博客
12-09 460
需要引入的包都在代码里 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;网站注册页面&amp;lt;/title&amp;gt; &amp;lt;
jquery之注册验证页面
weixin_43706224的博客
05-24 3043
1.鼠标放到email框会提示信息 2.鼠标离开就会检测用户所填写的信息 3.提示信息是灰色字体，检测之后（错误）的字体红色 4.当填写信息正确的时候会出现一个对号（图片） 5.提交的时候也会做检测 6.检测全部正确的话就让提交 ...
jQuery Validate插件详解：快速高效表单验证实践
在实际应用中，比如注册页面的验证，jQuery Validate可以帮助开发者快速构建出功能完善且用户友好的表单验证系统，从而专注于业务逻辑和核心功能的实现。jQuery Validate是一款强大且易于使用的表单验证工具，值得在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值