jquery validate自定义验证

首先导包:

<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个字符"
                    }
                }
            });
});

本文转自博客园
@ Java野生程序猿

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 jQuery Validate 插件的 `addMethod` 方法来自定义验证规则,并使用隐藏的 input 元素来进行验证。 具体实现步骤如下: 1. 在 HTML 文件中添加一个隐藏的 input 元素,并设置它的 `name` 属性和验证规则。 ```html <input type="hidden" name="customButton" class="custom-button-validate" required> ``` 在上述代码中,`name` 属性设置为 `customButton`,并添加了 `required` 规则。同时,通过 `class` 属性添加了一个自定义的类名 `custom-button-validate`,以便在 JavaScript 文件中进行操作。 2. 在 JavaScript 文件中,使用 `addMethod` 方法来自定义验证规则。 ```javascript $.validator.addMethod("customButton", function(value, element) { // 在这里编写自定义验证规则的逻辑 // 如果验证通过,返回 true,否则返回 false return true; }, "自定义验证失败提示信息"); ``` 在上述代码中,`addMethod` 方法接受三个参数,分别为自定义验证方法的名称、验证函数和验证失败时的提示信息。在验证函数中,可以编写自定义验证规则逻辑,并根据验证结果返回 `true` 或 `false`。 3. 在 jQuery Validate 插件的 `submitHandler` 方法中,手动触发验证。 ```javascript $("#form").validate({ submitHandler: function(form) { // 验证通过后的处理逻辑 // 在这里手动触发自定义验证规则 $(".custom-button-validate").valid(); } }); ``` 在上述代码中,`submitHandler` 方法在表单验证通过后被触发。在这个方法中,可以编写表单验证通过后的处理逻辑,并手动触发隐藏的 input 元素的验证,以便触发自定义验证规则。 通过上述步骤,可以实现在 jQuery Validate 插件中使用隐藏的 input 元素来自定义按钮验证。需要注意的是,在验证函数中,需要编写自定义验证规则逻辑,并根据验证结果返回 `true` 或 `false`。同时,需要在 `submitHandler` 方法中手动触发隐藏的 input 元素的验证,以便触发自定义验证规则。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值