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,一个是用户名,一个 ...
随机推荐
- SpringBoot异常处理(一)
ERROR:严重问题,我们无法处理 EXCEPTION:RuntimeException 编译期不检查,出现问题需要我们修改代码 非RuntimeException(CheckedExceptio ...
- CRM、DMP、CDP概念解析
CRM.DMP.CDP,都是什么鬼?有什么区别差异?别说你都懂 摘自https://maxket.com/crm-dmp-cdp/ 如果您不想多花人生中宝贵的十分钟,那么不用多考虑了,上CDP吧.如果 ...
- 如何解决 ajax跨域被阻止 CORS 头缺少 'Access-Control-Allow-Origin'的问题?
已拦截跨源请求:同源策略禁止读取位于 http://192.168.1.72:8080/securityMonitor_TV/service/getTest 的远程资源. (原因:CORS 头缺少 ' ...
- Vue概述
Vue.js是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计.Vue的核心库关注于视图(html),不仅易上手,还便于与第三方库或项目整合. 渐进式:一步一步,不是将所有的东西都学完才能使用 ...
- Solon rpc 之 SocketD 协议
1. 简介 SocketD 是一种二进制的点对点通信协议,是一种新的网络通信第七层协议.旨在用于分布式应用程序中.从这个意义上讲,SocketD可以是RSocket等其他类似协议的替代方案.它的消息协 ...
- Azure Terraform(三)部署 Web 应用程序
一,引言 上一节关于 Terraform 的文章讲到 Terraform 使用到的一些语法,以及通过演示使用 Terraform 在Azure 上部署资源组,极大的方便了基础设施实施人员,也提高了基础 ...
- ThreadX移植——STM32H7+MDK-AC6平台
作者:zzssdd2 E-mail:zzssdd2@foxmail.com 一.前言 在uCOS全家桶宣布开源之后被微软收购的ThreadX也开源了,真是喜大普奔,对于我们这些嵌入式行业从业者来说,能 ...
- Socket粘包问题终极解决方案—Netty版(2W字)!
上一篇我们讲了<Socket粘包问题的3种解决方案>,但没想到评论区竟然炸了.介于大家的热情讨论,以及不同的反馈意见,本文就来做一个扩展和延伸,试图找到问题的最优解,以及消息通讯的最优解决 ...
- 直播预告 | 开源的云原生开发环境 —— Nocalhost
直播来啦!本次云原生学院邀请到腾讯云 CODING DevOps 后端工程师王炜为大家分享<开源的云原生开发环境 -- Nocalhost>. 直播信息 讲师:王炜 - 腾讯云 CODIN ...
- Laya 踩坑日记-人物模型穿模,模型显示不正常
最近做游戏,人物要跑到很远的位置,z轴距离大概有20000个单位,然后就发现一个bug,到远处人物模型穿了,而且没办法改,这就尴尬了 Z轴对应值 0 100000 100000 当距离零点 ...