码迷,mamicode.com
首页 > Web开发 > 详细

jquery validation笔记

时间:2018-01-11 15:46:26      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:on()   技术分享   round   info   auth   ffffff   col   parse   validator   

官网:

https://jqueryvalidation.org/

对于msessage常用中文在菜鸟教程就有了。

原来一直自己写验证规则,正则校验email、phone number、price等,虽然Boolean值容易判定,但是错误处理不太好弄,尤其是错误之后的监听绑定,总之是代码太过冗余,即使把常用js校验规则写在common.js里面依然略麻烦,这里就不纠结了,直接用插件吧。

以前用validform "http://validform.rjboy.cn/",现在觉得有点儿花哨还是用jquery的官方插件吧

1、如何用button触发validation验证并执行(ajax保存表单时候常用)

HTML:

技术分享图片

 

在js文件之中用return方式,这样也可以不至于在页面的底部有太多的js代码:

 

/**
 * @method 添加满减规则
 * @author xu
 * @copyright 2017-08-31
 */
 function savenewManjian()
 {
    // 验证提交表单
    return $("#add-manjianguize-from").validate({
        rules: {
            // 套餐名称必须
            MAN_NAME: "required",
            // 条件额度
            FULL_MONEY:  {
                required: true,
                number:true
            },
            // 优惠额度
            CUT_MONEY:  {
                required: true,
                number:true,
                compareMoney:"input[name=‘FULL_MONEY‘]"
            },
            // 开始时间必须
            MANJIAN_BTIME: {
                required: true,
            },
            // 结束时间必须
            MANJIAN_ETIME: {
                required:true,
                compareDate: "input[name=‘MANJIAN_BTIME‘]",
            }
        },
        messages: {
            MAN_NAME:"名称不能为空!",
            FULL_MONEY: {
                required:"条件额度必须!",
                number:"请输入数字!"
            },
            CUT_MONEY: {
                required:"优惠额度必须!",
                number:"请输入数字!",
                compareMoney:"优惠金额必须小于条件额度!"
            }, 
            MANJIAN_BTIME: 开始时间必须!,
            MANJIAN_ETIME:{  
                required: "结束时间不能为空!",  
                compareDate: "结束日期必须大于开始日期!"  
            }
        }
    });
 }

触发事件(也可以直接在.form( )执行验证的时候success回调直接ajax保存数据):

技术分享图片

2、校验结束时间不能小于开始时间

 

$(document).ready(function(){
    // 校验结束时间和开始时间
    $.validator.methods.compareDate = function(value, element, param) {  
        var startDate = $(param).val();
        var date1 = new Date(Date.parse(startDate.replace("-", "/")));  
        var date2 = new Date(Date.parse(value.replace("-", "/")));  
        return date1 < date2;  
    }; 
    // 校验满减金额和优惠金额
    $.validator.methods.compareMoney = function(value, element, param) {  
        var FULL_MONEY = $(param).val();
        return value < FULL_MONEY;  
    }; 
});

 

jquery validation笔记

标签:on()   技术分享   round   info   auth   ffffff   col   parse   validator   

原文地址:https://www.cnblogs.com/xuweiqiang/p/8267586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!