<script src="${pageContext.request.contextPath}/resources/js/jquery-1.12.0.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/resources/js/jquery.validate.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/resources/js/messages_zh.js" type="text/javascript"></script>

<form class="am-form" id="mechantForm" class="doc-vld-msg">
                            <div class="am-form-group">
                                <label for="doc-ipt-name-1" class="labelname">厂商名称:</label>
                                <input type="text" id="merchantName" name="merchantName" minlength="3" placeholder="输入厂商名称" required/>
                            </div>
                            <div class="am-form-group">
                                <label for="doc-ipt-name-1" class="labelname">姓名:</label>
                                <input type="text" name="name" id="name" placeholder="请输入姓名">
                            </div>
                            <div class="am-form-group">
                                <label for="doc-ipt-phone-1" class="labelname">电话:</label>
                                <input type="text" name="telphone" id="telphone" placeholder="请输入电话">
                            </div>
                            <div class="am-form-group">
                                <label for="doc-ipt-phone-1" class="labelname">公司地址:</label>
                                <input type="text" name="address" id="address" placeholder="请输入公司地址">
                            </div>
                            <div style="margin-left:15%;margin-top:27px;">
                                <button style="margin-right:20px;" type="button" data-am-modal-close  class="mybtn">关闭</button>
                                <button type="submit"  class="mybtn"  id='saveBtn'>确定</button>
                            </div>
</form>

js部分:

jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        var mobile = /^1[34578]\d{9}$/;/*/^1(3|4|5|7|8)\d{9}$/*/
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");

$("#saveBtn").click(function() {
        
              $("#mechantForm").validate({
                  submitHandler: function(form){  
                      $.ajax({
                            cache : true,
                            type : "POST",
                            url : "merchant",
                            data : $('#mechantForm').serialize(),
                            async : false,
                            error : function(data) {
                                layer.alert('系统错误', {icon: 0});
                            },
                            success : function(data) {
                                layer.alert('保存成功', {icon: 1});
                                $('#mechantForm')[0].reset();
                            }
                        });
                         },
                    rules: {
                        merchantName: {
                            required: true,
                             minlength: 3
                        },
                        name:{
                            required: true,
                             minlength: 2
                        },
                        telphone:{
                            required: true,
                            minlength: 11,
                            maxlength:11,
                            digits:true,
                            number:true,
                            isMobile : true
                        },
                        address:{
                            required: true,
                            maxlength:50
                        }
                    },
                    messages: {
                        merchantName: {
                            required: "不能为空",
                             minlength: "不能少于3个字符"
                        },
                        name:{
                            required: "不能为空",
                             minlength: "不能少于2个字符"
                        },
                        telphone:{
                            required: "不能为空",
                            minlength: "必须11位数字",
                            maxlength:"必须11位数字",
                            digits:"必须是数字"    ,
                            number:"请输入有效数字",
                            isMobile : "手机号格式错误"
                        },
                        address:{
                            required:'不能为空',
                            maxlength:"不能多于50个字符"
                        }
                    }
                });
    });

jquery验证插件validate自定义扩展的更多相关文章

  1. jQuery验证插件 Validate详解

    1.引入必要的文件,以及语言中文提示包 2.使用规则如下: 序号 规则 描述 1 required:true 必须输入的字段. 2 remote:"check.php" 使用 aj ...

  2. jquery 验证插件 validate

    1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电 ...

  3. 表单验证插件——validate

    表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options ...

  4. jQuery验证插件

    原文:jQuery验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate. ...

  5. jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  6. jQuery应用一之验证插件validate的使用

    综述 validate是一个用来验证表单提交的插件,应用十分广泛,具有如下的几个功能 自带了基本的验证规则 提供了丰富的验证信息提示功能 多种事件触发验证 自定义验证规则 下面我们就来感受一下这个插件 ...

  7. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

  8. 第九章 jQuery验证插件简介

    1. 表单验证插件-----Validation <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  9. jQuery验证插件使用初步

    validate是一款优秀的表单验证插件,其初步使用方法如下: (1)前台页面代码: <form id="form1" runat="server"> ...

随机推荐

  1. 了解Java密码扩展的基础

      了解Java密码扩展的基础     Java密码扩展(The Java Cryptography Extension),是JDK1.4的一个重要部分,基本上,他是由一些包构成的,这些包形成了一个框 ...

  2. 【东软实训】SQLselect及其相关操作

    SQL select 及相关操作 SQL是用于访问和处理数据库的标准的计算机语言,我们所使用的的是Oracle SQL 一个数据库通常包含一个或多个表,每个表有一个名字表示,下图即为一个名为“emp” ...

  3. “完美”解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来。

    最近做,微信点餐小程序,遇到添加商品时出现抛物动画,参考借鉴了这位大神的方法 https://www.cnblogs.com/greengage/p/7815842.html 但出现了一个问题,连续点 ...

  4. react-native 0.58版本打包图片问题 task ':app:mergeReleaseResources' Error: Duplicate resources

    debug没问题,在生成正式apk的时候就如下: google了一下在github上找到了解决方案: github问题指向 在node_modules/react-native/react.gradl ...

  5. cc.Label

    cc.Label 1:cc.Label是显示文字的组件;2:cc.Label属性面板:  String: 文本显示的内容;  Horiznotal: 水平对齐的方式: 左 右 居中;  Vertial ...

  6. 用element-ui的走马灯carousel轻松实现自适应全屏banner图

    写在前面:网站轮播图建议使用swiper组件,非常方便快捷.vue轮播图插件之vue-awesome-swiper 接手一个项目,轮播图是用element-ui的carousel实现的,看起来效果还不 ...

  7. (十四)Python3 字符串格式化

    Python3 字符串格式化 字符串的格式化方法分为两种,分别为占位符(%)和format方式.占位符方式在Python2.x中用的比较广泛,随着Python3.x的使用越来越广,format方式使用 ...

  8. Oracle 实现查询不区分大小写(设置数据库)

    转http://blog.csdn.net/shl7765856/article/details/7622756 查询数据的时候. SQL Server 默认 不区分大小写. 如果要区分,就要额外的设 ...

  9. NOI模拟(3.6)Assignment

    Description 随机生成一个长度为m且每个元素都为1~n之间的整数的单调不下降序列~(即序列的(i>1)都不小于),(随机生成指每一种可能的序列都等概率被生成).请问这个序列的众数出现次 ...

  10. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...