JS 实现一个实时动态校验,将输入格式错误的显示为红色背景
功能描述:
实时动态校验,如果输入的格式错误,将弹窗提示输入格式错误并将背景展示为红色。
源码:
前台:
<hy:formfield name="cxfdl" onblur="test2('XXXXXXXX','cxfdl')" title="XXXXXXXX" />
<hy:formfield name="pjyjd" onblur="test2('title','pjyjd')" title="title" />
JS:
保存方法:
//保存
function save(){
var msg = "";
// 遍历单个校验时不通过的键值对集合,拼接错误信息
$.each(notPassArray, function(key){
msg = msg + notPassArray[key] + "</br>";
});
// 错误信息不为空时,弹出错误信息,并取消保存处理
if (msg != "") {
$.alert('提示信息', msg, function(){});
return;
}
var formData = ajaxform.collectData() ;
var dataArr = [] ;
dataArr.push(formData) ;
$.request({
action:"save",
data:dataArr,
success:onsavecomplete
}) ;
}
//用来存储校验不通过的信息
var notPassArray = {} ;
//正则整数校验
function test1(title, column){
var columnObj = ajaxform.getColumnComponent(column);
var patrn = /^[0-9]*$/;
var columnValue = ajaxform.getColumnValue(column);
if (columnValue!=null && columnValue!="" && !patrn.test(columnValue)) {
notPassMsg = title + '只能为整数';
notPassArray[column]=notPassMsg;
columnObj.css({"background-color":"#FDC8CC"});
$.alert('提示信息', notPassMsg, function(){});
} else {
delete notPassArray[column];
columnObj.css({"background-color":""});
}
}
//校验带小数的数字
function test2(title, column){
// 根据column获得对应的jquery对象
var columnObj = ajaxform.getColumnComponent(column);
var patrn = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
// 根据传进来的column获得填写的内容
var columnValue = ajaxform.getColumnValue(column);
if (columnValue!=null && columnValue!="" && !patrn.test(columnValue)) {
// 拼接错误信息
notPassMsg = title + ':只能输入小数点后两位的数字';
// 将错误信息保存到键值对的集合中
notPassArray[column]=notPassMsg;
// 设置校验不通过的背景颜色
columnObj.css({"background-color":"#FDC8CC"});
$.alert('提示信息', notPassMsg, function(){});
} else {
// 校验通过后删除键值对中的错误信息
delete notPassArray[column];
// 校验通过后去掉背景颜色
columnObj.css({"background-color":""});
}
}
JS 实现一个实时动态校验,将输入格式错误的显示为红色背景的更多相关文章
- 第二次作业#include <stdio.h> int main() { int a,b,c,d,e; printf("请输入一个不多于五位的整数:\n"); scanf("%d",&a); if(a>=100000||a<=0) { printf("输入格式错误! \n"); } else { if(
1 判断成绩等级 给定一百分制成绩,要求输出成绩的等级.90以上为A,80-89为B,70-79为C,60-69为D,60分以下为E,输入大于100或小于0时输出"输入数据错误". ...
- JS返回一个数据的千分位格式
/** * 价钱转换-从右往左每3位数字加一个逗号 * @param price 需要转换的价格 */ formatPrice(price){ var newPrice = price.split(' ...
- 针对ACM输出格式的一个小技巧(对格式错误说不!)
printf("%d%c",bmax," \n"[i==n]); 上文中bmax为题目中需要输出的整形变量,可以脑补很多ans,max之类的,重点在于%c和后面 ...
- Unsolved输入格式错误1022
https://pintia.cn/problem-sets/994805342720868352/problems/994805480801550336
- java——int、args[]传参、标签、数字塔?、一个输入格式
1.当int型整数超出自己范围时,会从它的上界重新开始. public class exp { public static void main(String[] args) { int i = 214 ...
- JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。
编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- 用Vue.js搭建一个小说阅读网站
目录 1.简介 2.如何使用vue.js 3.部署api服务器 4.vue.js路由配置 5.实现页面加载数据 6.测试vue项目 7.在正式环境部署 8.Vue前端代码下载 1.简介 这是一个使用v ...
- vue.js 作一个用户表添加页面----初级
使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...
随机推荐
- 通过naa在esxi主机上找到物理磁盘的位置
因为有一块磁盘告警,需要找到这个块磁盘.通过网络搜索就找到了这个shell脚本. 感谢 Jorluis Perales, VxRail TSE 2 shell脚本: # Script to obtai ...
- Redis缓存篇(一)Redis是如何工作的
Redis提供了高性能的数据存取功能,所以广泛应用在缓存场景中,既能有效地提升业务应用的响应速度,还可以避免把高并发压力发送到数据库层. 因为Redis用作缓存的普遍性以及它在业务应用中的重要作用,所 ...
- Flask 操作Mysql数据库 - flask-sqlalchemy扩展
数据库的设置 Web应用中普遍使用的是关系模型的数据库,关系型数据库把所有的数据都存储在表中,表用来给应用的实体建模,表的列数是固定的,行数是可变的.它使用结构化的查询语言.关系型数据库的列定义了表中 ...
- Alpha冲刺——汇总博客
一.代码规范与计划 代码规范与计划 二.10篇冲刺随笔 冲刺随笔--Day1 冲刺随笔--Day2 冲刺随笔--Day3 冲刺随笔--Day4 冲刺随笔--Day5 冲刺随笔--Day6 冲刺随笔-- ...
- NOIP初赛篇——01计算机常识
发展历史 年代划分 代别 年代 逻辑(电子)元件 第一代 1946-1958 电子管 第二代 1959-1964 晶体管 第三代 1965-1970 集成电路 第四代 1971-至今 大规模.超大规模 ...
- Maven项目编译之后xml文件不存在
如题: 问题请看图,target目录是编译之后的,发现并没有对应的mapper.xml文件 原因: maven项目默认不加载此类文件 解决办法有两个: 其一是将mybatis的xml映射文件放在mav ...
- 机器学习笔记·adaboost
一.算法简介 Adaboost算法是一种集成算法,所谓集成算法就是将多个弱的分类器组合在一起变成一个强的分类器.弱分类器通常是指分类效果比随机分类稍微好一点的分类器.就像我们在做一个重要决定的时候,通 ...
- kubernetes环境部署单节点redis
kubernetes部署redis数据库(单节点) redis简介 Redis 是我们常用的非关系型数据库,在项目开发.测试.部署到生成环境时,经常需要部署一套 Redis 来对数据进行缓存.这里介绍 ...
- Docker 镜像仓库使用(六)
阿里云docker 容器镜像服务: www.aliyun.com 1 服务开通 (开通的时候要求创建密码请牢记此密码) 2 创建命名空间 3 创建镜像仓库 4 linux 客户端登录 登录: dock ...
- CPNDet:粗暴地给CenterNet加入two-stage精调,更快更强 | ECCV 2020
本文为CenterNet作者发表的,论文提出anchor-free/two-stage目标检测算法CPN,使用关键点提取候选框再使用两阶段分类器进行预测.论文整体思路很简单,但CPN的准确率和推理速度 ...