用户注册验证_基于jquery validate
2015-06-03 14:14
676 查看
利用jquery validate提供的验证进行用户注册信息校验
1.引入jquery validate提供的js
2.根据需求进行自定义验证:电话,邮箱,身份证号
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 onchange="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);" onclick="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>
相关文章推荐
- $.grep ,$.map,jquery筛选数组之grep、each、inArray、map的用法及遍历json对象
- jquery页面刷新
- jquery qrcode二维码生成插件
- jQuery中extend()和fn.extend()方法详解
- jquery中添加属性和删除属性
- jQuery事件绑定on()、bind()与delegate() 方法详解
- jquery 防止按钮二次点击
- jQuery插件jqplot的详细配置说明和渲染器
- jquery选择器,逗号
- Jquery 获取CheckBoxList 中选择的值和获取RadioButton 选中的状态
- jquery抖动的按钮
- CSS选择器与jQuery选择器的异同:一些特殊的选择器
- jquery delegate
- springMVC框架下JQuery传递并解析Json数据
- Jquery绑定事件(bind和live的区别)
- jQuery on, live,bind 等方法通过参数 data 传值给 function
- Cordova+jQuery Mobile+Spring REST
- jQuery设计思想
- Head First jQuery读书笔记
- jQuery应用一之验证插件validate的使用