分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

jquery validation笔记

发布时间:2023-09-06 01:35责任编辑:彭小芳关键词:暂无标签

官网:

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笔记

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved