表单引入validate验证

最新推荐文章于 2024-06-20 15:34:36 发布

Demonor_

最新推荐文章于 2024-06-20 15:34:36 发布

阅读量919

点赞数 2

分类专栏： java 文章标签： validate 表单验证 validate验证表单 valid 表单

本文链接：https://blog.csdn.net/A13432421434/article/details/72357191

版权

java 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

下面讲的这个例子是使用bootstrap模态框（也是一个form表单），现在要做的就是提交表单时进行验证，验证不通过则不提交表单，留在本页面而且显示验证错误信息

1 . 先看验证效果

2 . 引入相关js

3 . 页面加载完成的同时给form表单引入validate()

4 . 在每个input里面编写验证条件

5 . 模态框详细代码如下：

<!-- 添加学员模态框 -->
 <script type="text/javascript">
					$().ready(function() {	
						$("#addstudentFrom").validate();
					
					})
</script>

  <div class="modal fade" id="addstudent">
            <div class="modal-dialog">
              <div class="modal-content">
          
   			 <form:form id="addstudentFrom" method="post" action="addStudent"  class="form-horizontal" 	modelAttribute="userHibernate">
	             <div class="modal-header">添加学员</div>
	            
	             <div class="modal-body">
						<!-- JSR303验证数据 -->
						
                    <div class="form-group">
                      <label for="userId" class="col-sm-3 control-label ">学号：</label>
                      <div class="col-sm-5">
                      <form:input path="userId" class="form-control list-inline {required:true,rangelength:[1,15],messages:{required:'学号不能为空',rangelength:'学号为1-15个字符且不支持中文'}}" />  
                      </div>
                    </div>
                    
                    <div class="form-group">
                      <label for="user_name" class="col-sm-3 control-label">姓名：</label>
                      <div class="col-sm-5">
                         <form:input path="user_name" class="form-control list-inline {required:true,rangelength:[1,15],messages:{required:'姓名不能为空',rangelength:'姓名为1-15个字符且不支持中文'}}"  /> 
                      </div>
                    </div>
                    
                    
                   
                    
                     <div class="form-group">
                      <label for="address" class="col-sm-3 control-label">地址：</label>
                      <div class="col-sm-5">
                        <form:input path="address" class="form-control list-inline {rangelength:[1,225]}" /> 
                      </div>
                    </div>
                    
                    
                    
                    <div class="form-group">
                      <label for="password" class="col-sm-3 control-label">密码：</label>
                      <div class="col-sm-5">
                         <form:input id="password" type="password" path="password" class="form-control list-inline {required:true,rangelength:[4,20],messages:{required:'密码不能为空且不支持中文',rangelength:'密码为4-20个字符且不支持中文'}}" /> 
                      </div>
                    </div>
                    
                    <div class="form-group">
                      <label for="" class="col-sm-3 control-label">确认密码：</label>
                      <div class="col-sm-5">  
                         <form:input id="confirm_password" type="password" path="" class="form-control list-inline {required:true,rangelength:[4,20],equalTo:'#password',messages:{required:'确认密码不能为空且不支持中文',rangelength:'确认密码为4-20个字符且不支持中文',equalTo:'两次输入不一致'} }" /> 
                      </div>
                    </div>
                    
                    
                    <div class="form-group">
                      <label for="tel" class="col-sm-3 control-label">联系电话：</label>
                      <div class="col-sm-5">
                         <form:input path="tel" class="form-control list-inline"  /> 
                      </div>
                    </div>
                    
                   
                    
                     <div class="form-group">
                      <label for="email" class="col-sm-3 control-label">电子邮件：</label>
                      <div class="col-sm-5">
                        <form:input path="email" class="form-control list-inline {email:true,messages:{email:'请输入合法的电子邮件'}}"/> 
                      </div>
                    </div>
                    
              
                    <div class="form-group">
                      <label for="birthday" class="col-sm-3 control-label">出生年月：</label>
                      <div class="col-sm-5">
						 <form:input path="birthday" onClick="WdatePicker()"  class="form-control list-inline {required:true,messages:{required:'出生年月不能为空'}}"  /> 
                      </div>
                    </div>
          
            <div class="form-group">
                      <label for="gender" class="col-sm-3 control-label">性别：</label>
                      <div class="col-sm-5">
                      <%--  <form:input path="gender" class="form-control list-inline" cssClass="{min:0,max:1,digits:true,required:true}"/>  --%>
                     
                      <form:select path="gender">
                      <option>male</option>
                      <option selected>female</option>
                      </form:select>
                      
                      
                      </div>
                    </div>
                    
                    
</div>

                <div class="modal-footer">
				<input class="btn btn-sm btn-danger" data-dismiss="modal"    type="button" value="取消">
				<input class="btn btn-sm btn-success submit" id="add_student_save"  type="submit" value="保存">
					
				</div> 
</form:form>	
              </div>
            </div>
          </div>

6 . validate实现可以客户端验证，JSR 303 可以实现后台验证（了解即可）

7 . OK，validate验证完整流程演示完毕，谢谢大家