利用js写的表单验证记录一下:
<script type="text/javascript">
function validate_form(thisform)
{
var title,intrestLocation,intrestContent,intrestTime,callEndTime,ParticipantsIsAvailable,participantsNumber,participantsNow;
title = $("#title").val();
intrestLocation = $("#intrestLocation").val();
intrestTime = $("#intrestTime").val();
callEndTime = $("#callEndTime").val();
ParticipantsIsAvailable = $("#ParticipantsIsAvailable").val();
participantsNumber = $("#participantsNumber").val();
participantsNow = $("#participantsNow").val();
if(title==null||title==""){
alert("请输入标题");
return false;
}if(intrestLocation==null||intrestLocation==""){
alert("请输入活动地点")
return false;
}
if(intrestTime==null||intrestTime==""){
alert("输入活动时间");
return false;
}
if(callEndTime==null||callEndTime==""){
alert("输入截止报名时间");
return false;
}
if(participantsNumber==null||participantsNumber==""){
alert("输入参与人数否则限制人数设置为否");
return false;
}
if (!(/^\+?[1-9][0-9]*$/.test(participantsNumber))){
alert("输入的参与人数不是正整数,请输入正整数");
return false;
}
if(participantsNow==null||participantsNow==""){
alert("输入当前人数");
return false;
}
if (!(/^\+?[1-9][0-9]*$/.test(participantsNow))){
alert("输入的当前人数不是正整数,请输入正整数");
return false;
}
if(validate_time()==false)
return false;
if(check_number()==false)
return false;
return true;
}
function check_ParticipantsIsAvailable(){
var ParticipantsIsAvailable = $("#ParticipantsIsAvailable").val();
if(ParticipantsIsAvailable==0){12
$("#participantsNumber").hide();
$("#participantsNumber").val(100000);
}
if(ParticipantsIsAvailable==1){
$("#participantsNumber").show();
}
}
function check_number(){
var participantsNumber = $("#participantsNumber").val();
var participantsNow = $("#participantsNow").val();
var ParticipantsIsAvailable = $("#ParticipantsIsAvailable").val();
if(ParticipantsIsAvailable==1) {
if($("#participantsNumber").val() <= $("#participantsNow").val()){
alert("参加人数要大于当前人数哦亲~~");
return false;
}
}
else return true;
}
function validate_time(){
var intrestTime,callEndTime;
intrestTime = document.getElementById("intrestTime").value;
callEndTime = $("#callEndTime").val();
if(callEndTime>intrestTime) {
alert("日期截止时间不能晚于活动开始时间哦亲~~");
return false;
}
}
</script>
如果报错返回false不能继续执行知道成功
form表单
<form id="publishIntrest" action="publishIntrest.action" οnsubmit="return validate_form(this);" method="post" class="form-signin">
<h3 class="form-signin-heading">发起新的兴趣</h3>
<input id="title" name="tqIntrest.Title" type="text" class="form-control" placeholder="标题">
<input id="intrestLocation" name="tqIntrest.intrestLocation" type="text" placeholder="兴趣地点" class="form-control">
<input id="intrestContent" name="tqIntrest.intrestContent" type="text" placeholder="兴趣内容"class="form-control">
<div class="input-append date form_datetime" >
<input class="form-control" id= "intrestTime" name="tqIntrest.intrestTime" placeholder="活动时间" data-date-format="yyyy-mm-dd hh:ii:00" size="50" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<div class="input-append date form_datetime">
<input id="callEndTime" class="form-control"name="tqIntrest.callEndTime" name="tqIntrest.callEndTime" size="20" type="text" value="" readonly placeholder="报名截止时间"class="form-control">
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="hidden" id="dtp_input1"class="form-control" value= "请输入时间"/>
是否限制人数:<select placeholder="是否限制参与人数" selected="-1" id="ParticipantsIsAvailable" name="tqIntrest.participantsIsAvailable" οnclick="check_ParticipantsIsAvailable()">
<option value="1">是</option>
<option value="0">不限</option>
</select>
<input class="form-control" id="participantsNumber" name="tqIntrest.participantsNumber" type="text" placeholder="参与人数">
<input class="form-control"id="participantsNow" name="tqIntrest.participantsNow" type="text" placeholder="当前人数">
<br />
</p><input type="submit" class="btn btn-primary btn-block" vlaue="发起兴趣">
</form>