jquery validation表单验证,自定义字段验证

来源:互联网 发布:单片机如何烧程序 编辑:程序博客网 时间:2024/05/21 19:22

首先导入三个js支持

<script src='/resources/assets/js/jquery.js'></script>
<!-- jquery validation --><script type="text/javascript" src="/resources/js/jquery.validate.min.js"></script>
<!-- 中文支持 -->
<script type="text/javascript" src="/resources/js/messages_zh.min.js"></script>

js代码

<script type="text/javascript">/* 验证通过之后回调方法 */$.validator.setDefaults({    submitHandler: function() {    alert("添加成功!");      /* 提交表单的方法 */      MAR.ajaxSubmitForm('/market/souMarket',$('#submitForm').serialize(),'POST','/market/marketIndex')    }});$(function(){/* 自定义手机号码验证  */$.validator.addMethod("isMobile", function(value, element) {      var length = value.length;      var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;      return this.optional(element) || (length == 11 && mobile.test(value));  }, "*请正确填写您的手机号码"); /* 点击a标签提交表单 ,触发验证,可以换成按钮触发,或者表单的submit按钮*/$('#btn-submit').click(function(){$('#submitForm').submit();});/* 提交后验证提交表单 */$('#submitForm').validate({onsubmit: true,//提交表单时验证onfocusout:false,// 是否在失去焦点时验证 onkeyup :false,// 是否在敲击键盘时验证/* 验证规则 */rules:{marketName:"required",marketType:"required",address:"required",  zipcode:"required",     principal:"required",  linkMan:"required",  phone : {              required : true,              minlength : 11,              isMobile : true          },  email:{email:true,},    },messages: {marketName:'*请输入市场名称',marketType:"*请输入市场类型",address:"*请输入地址",  zipcode:"*请输入邮编",     principal:"*请输入负责人",  linkMan:"*请输入联系人",  phone :"*请正确填写您的手机号码",email:"*请输入有效的电子邮件地址",},});});</script>
样式(将错误提示更改为红色)

<style>.error{color:red;}</style>
表单
<form id="submitForm" class="form-horizontal"><input type="hidden" name="id" id="id" value="<#if entity??>${entity.id?c!''}</#if>"/><div class="form-group"><label style="text-align: right;" class="control-label col-sm-4 col-xs-6 no-padding-right"><span class="red">*</span>市场名称</label><div class=" col-sm-8 col-xs-6"><div class="clearfix"><input class="col-sm-4 col-xs-8" type="text" name="marketName" id="marketName" value="<#if entity??>${entity.marketName!''}</#if>" placeholder="市场名称"/></div></div></div><div class="space-2"></div><div class="form-group"><label style="text-align: right;" class="control-label col-sm-4  col-xs-6 no-padding-right"><span class="red">*</span>市场类型</label><div class="col-sm-8 col-xs-6"><div class="clearfix"><input class="col-sm-4 col-xs-8" type="text" name="marketType" id="marketType" value="<#if entity??>${entity.marketType!''}</#if>" placeholder="市场类型"/></div></div></div><div class="space-2"></div><div class="form-group"><label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" ><span class="red">*</span>地址</label><div class="col-sm-8  col-xs-6"><div class="clearfix"><input class="col-sm-4 col-xs-8" type="text" name="address" id="address" value="<#if entity??>${entity.address!''}</#if>" placeholder="地址"/> </div></div></div><div class="space-2"></div><div class="form-group"><label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" ><span class="red">*</span>邮编</label><div class="col-sm-8  col-xs-6"><div class="clearfix"><input class="col-sm-4 col-xs-8" type="text" name="zipcode" id="zipcode" value="<#if entity??>${entity.zipcode!''}</#if>" placeholder="邮编"/></div></div></div><div class="space-2"></div><div class="form-group"><label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" ><span class="red">*</span>营业面积</label><div class="col-sm-8  col-xs-6"><div class="clearfix"><input class="col-sm-4 col-xs-8" type="text" name="businessArea" id="businessArea" value="<#if entity??>${entity.businessArea!''}</#if>" placeholder="营业面积"/></div></div></div><div class="space-2"></div><div class="form-group"><label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" ><span class="red">*</span>占地面积</label><div class="col-sm-8  col-xs-6"><div class="clearfix"><input class="col-sm-4 col-xs-8" type="text" name="zhandiArea" id="zhandiArea" value="<#if entity??>${entity.businessArea!''}</#if>" placeholder="占地面积"/></div></div></div><div class="space-2"></div><div class="form-group"><label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" ><span class="red">*</span>负责人</label><div class="col-sm-8  col-xs-6"><div class="clearfix"><input class="col-sm-4 col-xs-8" type="text" name="principal" id="principal" value="<#if entity??>${entity.principal!''}</#if>" placeholder="负责人"/></div></div></div><div class="space-2"></div><div class="form-group"><label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" ><span class="red">*</span>联系人</label><div class="col-sm-8  col-xs-6"><div class="clearfix"><input class="col-sm-4 col-xs-8" type="text" name="linkMan" id="linkMan" value="<#if entity??>${entity.linkMan!''}</#if>" placeholder="联系人"/></div></div></div><div class="space-2"></div><div class="form-group"><label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right"><span class="red">*</span>联系电话</label><div class="col-sm-8  col-xs-6"><div class="clearfix"><input class="col-sm-4 col-xs-8" type="text" name="phone" id="phone" value="<#if entity??>${entity.phone!''}</#if>" placeholder="联系电话"/> </div></div></div><div class="space-2"></div><div class="form-group"><label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" ><span class="red">*</span>邮箱</label><div class="col-sm-8  col-xs-6"><div class="clearfix"><input class="col-sm-4 col-xs-8" type="text" name="email" id="email" value="<#if entity??>${entity.email!''}</#if>" placeholder="邮箱"/> </div></div></div><div class="space-2"></div><div class="form-group"><label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right" ><span class="red">*</span>所在地类型</label><div class="col-sm-8  col-xs-6"><div class="clearfix"><input class="col-sm-4 col-xs-8" type="text" name="locationType" id="locationType" value="<#if entity??>${entity.locationType!''}</#if>" placeholder="所在地类型"/></div></div></div><div class="space-2"></div><div class="form-group"><label style="text-align: right;" class="col-sm-4  col-xs-6 control-label no-padding-right"><span class="red">*</span>备注</label><div class="col-sm-8  col-xs-6"><div class="clearfix">   <textarea class="col-sm-4 col-xs-8" id="form-field-8"  class="col-sm-4  col-xs-6" name="remark" id="remark"  placeholder="备注"><#if entity??>${entity.remark!''}</#if></textarea></div></div></div><div class="clearfix form-actions"><div class="col-md-offset-4 col-md-9"><a href="/market/marketIndex" class="btn"><i class="ace-icon fa fa-undo bigger-110"></i>返回</a>     <!-- <a href="javascript:MAR.ajaxSubmitForm('/market/souMarket',$('#submitForm').serialize(),'POST','/market/marketIndex')" class="btn btn-info"><i class="ace-icon fa fa-check bigger-110"></i> --><a href="javascript:void(0)" class="btn btn-info" id="btn-submit"><i class="ace-icon fa fa-check bigger-110"></i>提交</a></div></div></form>



 
原创粉丝点击