您的位置:首页 > Web前端 > JQuery

用户注册验证_基于jquery validate

2015-06-03 14:14 676 查看
利用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 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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: