基于JS实现表单的自动验证功能

最新推荐文章于 2020-12-09 12:57:56 发布

Bazingaea

最新推荐文章于 2020-12-09 12:57:56 发布

阅读量2k

点赞数

分类专栏： web 文章标签： jsp servlet js validation

本文链接：https://blog.csdn.net/Bazingaea/article/details/84320164

版权

注：本文代码是在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=&

最低0.47元/天解锁文章

Bazingaea

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
基于JS实现表单的自动验证功能

注：本文代码是在Github上找到的源码，在此基础上进行了修改。表单验证的功能是通过JS代码实现的，在作者的验证JS代码中有已经设定好的数据格式，使用的是正则表达式，如果你想要设置自己的数据格式，可以在js文件最后找到datatype进行修改。作者的后端代码使用的是php，我修改为JAVA，这不影响前端页面。整个代码框架是JSP+Servlet，前端页面的表单审核通过后才可以提交，将数据传...
复制链接

扫一扫

专栏目录