注:本文代码是在Github上找到的源码,在此基础上进行了修改。
表单验证的功能是通过JS代码实现的,在作者的验证JS代码中有已经设定好的数据格式,使用的是正则表达式,如果你想要设置自己的数据格式,可以在js文件最后找到datatype进行修改。作者的后端代码使用的是php,我修改为JAVA,这不影响前端页面。
整个代码框架是JSP+Servlet,前端页面的表单审核通过后才可以提交,将数据传输到后端进行处理,比如存到数据库等。
我这里的表单是一个注册会议模块,其实登录或者注册道理都一样,但是样式上可能不太好看,之前有尝试使用Bootstap Validator但是因效果出不来,就放弃了,使用BV样式会更好看一些。
JSP页面
<body>
<form class="registerform" action="servlet/Register" method="post">
<table width="100%" style="table-layout:fixed;">
<tr>
<td class="need" style="width:10px;">*</td>
<td style="width:100px;">用户名:</td>
<td style="width:235px;">
<input type="text" name="name" class="inputxt" datatype="s2-4" nullmsg="请输入用户名!" errormsg="请输入姓名!" /></td>
<td><div class="Validform_checktip">请输入真实姓名!</div></td>
</tr>
<tr>
<td class="need">*</td>
<td>性别:</td>
<td>
<input type="radio" value="1" name="gender" id="male" class="pr1" datatype="radio" errormsg="请选择性别!" />
<label for="male">男</label>
<input type="radio" value="2" name="gender" id="female" class="pr1" />
<label for="female">女</label>
</td>
<td><div class="Validform_checktip"></div></td>
</tr>
<tr>
<td class="need" style="width:10px;">*</td>
<td>手机:</td>
<td>
<input type="text" name="telephone" class="inputxt" datatype="s11" nullmsg="请输入手机号!" errormsg="请输入正确格式的手机号!" />
</td>
<td><div class="Validform_checktip">请输入11位手机号码!</div></td>
</tr>
<tr>
<td class="need" style="width:10px;">*</td>
<td>座机:</td>
<td>
<input type="text" name="landline" class="inputxt" datatype="line" nullmsg="请输入座机号!" errormsg="请输入正确格式的座机号!" />
</td>
<td><div class="Validform_checktip">请输入座机 以( 区号-号码) 的格式</div></td>
</tr>
<tr>
<td class="need" style="width:10px;">*</td>
<td>邮箱:</td>
<td>
<input type="text" name="email" id="email" value="${requestScope.reginfo.political}" class="inputxt" datatype="e" nullmsg="请输入邮箱!" errormsg="请输入正确格式的邮箱!" />
</td>
<td><div class="Validform_checktip">请输入常用的邮箱</div></td>
</tr>
<tr>
<td class="need" style="width:10px;">*</td>
<td>地址:</td>
<td>
<input type="text" name="address" class="inputxt" datatype="s2-20" nullmsg="请输入地址!" errormsg="请输入有效地址!" />
</td>
<td><div class="Validform_checktip">请输入现居住地址</div></td>
</tr>
<tr>
<td class="need" style="width:10px;">*</td>
<td>工作单位:</td>
<td>
<input type="text" name="work_place" class="inputxt" datatype="s2-20" nullmsg="请输入工作单位" />
</td>
<td><div class="Validform_checktip">请输入工作单位</div></td>
</tr>
<tr>
<td class="need" style="width:10px;">*</td>
<td>职位:</td>
<td>
<input type="text" name="work" class="inputxt" datatype="s2-10" nullmsg="请输入职位!" />
</td>
<td><div class="Validform_checktip">请输入当前职位</div></td>
</tr>
<tr>
<td class="need" style="width:10px;">*</td>
<td>职称:</td>
<td>
<input type="text" name="work_title" class="inputxt" datatype="s2-10" nullmsg="请输入职称!" />
</td>
<td><div class="Validform_checktip">请输入当前职称</div></td>
</tr>
<tr>
<td class="need" style=&