功能描述:

实时动态校验,如果输入的格式错误,将弹窗提示输入格式错误并将背景展示为红色。

源码:

前台:

<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 实现一个实时动态校验,将输入格式错误的显示为红色背景的更多相关文章

  1. 第二次作业#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时输出"输入数据错误". ...

  2. JS返回一个数据的千分位格式

    /** * 价钱转换-从右往左每3位数字加一个逗号 * @param price 需要转换的价格 */ formatPrice(price){ var newPrice = price.split(' ...

  3. 针对ACM输出格式的一个小技巧(对格式错误说不!)

    printf("%d%c",bmax," \n"[i==n]); 上文中bmax为题目中需要输出的整形变量,可以脑补很多ans,max之类的,重点在于%c和后面 ...

  4. Unsolved输入格式错误1022

    https://pintia.cn/problem-sets/994805342720868352/problems/994805480801550336

  5. java——int、args[]传参、标签、数字塔?、一个输入格式

    1.当int型整数超出自己范围时,会从它的上界重新开始. public class exp { public static void main(String[] args) { int i = 214 ...

  6. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  7. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  8. 用Vue.js搭建一个小说阅读网站

    目录 1.简介 2.如何使用vue.js 3.部署api服务器 4.vue.js路由配置 5.实现页面加载数据 6.测试vue项目 7.在正式环境部署 8.Vue前端代码下载 1.简介 这是一个使用v ...

  9. vue.js 作一个用户表添加页面----初级

    使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式 首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个 ...

随机推荐

  1. SpringBoot异常处理(一)

    ERROR:严重问题,我们无法处理 EXCEPTION:RuntimeException 编译期不检查,出现问题需要我们修改代码 ​ 非RuntimeException(CheckedExceptio ...

  2. CRM、DMP、CDP概念解析

    CRM.DMP.CDP,都是什么鬼?有什么区别差异?别说你都懂 摘自https://maxket.com/crm-dmp-cdp/ 如果您不想多花人生中宝贵的十分钟,那么不用多考虑了,上CDP吧.如果 ...

  3. 如何解决 ajax跨域被阻止 CORS 头缺少 'Access-Control-Allow-Origin'的问题?

    已拦截跨源请求:同源策略禁止读取位于 http://192.168.1.72:8080/securityMonitor_TV/service/getTest 的远程资源. (原因:CORS 头缺少 ' ...

  4. Vue概述

    Vue.js是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计.Vue的核心库关注于视图(html),不仅易上手,还便于与第三方库或项目整合. 渐进式:一步一步,不是将所有的东西都学完才能使用 ...

  5. Solon rpc 之 SocketD 协议

    1. 简介 SocketD 是一种二进制的点对点通信协议,是一种新的网络通信第七层协议.旨在用于分布式应用程序中.从这个意义上讲,SocketD可以是RSocket等其他类似协议的替代方案.它的消息协 ...

  6. Azure Terraform(三)部署 Web 应用程序

    一,引言 上一节关于 Terraform 的文章讲到 Terraform 使用到的一些语法,以及通过演示使用 Terraform 在Azure 上部署资源组,极大的方便了基础设施实施人员,也提高了基础 ...

  7. ThreadX移植——STM32H7+MDK-AC6平台

    作者:zzssdd2 E-mail:zzssdd2@foxmail.com 一.前言 在uCOS全家桶宣布开源之后被微软收购的ThreadX也开源了,真是喜大普奔,对于我们这些嵌入式行业从业者来说,能 ...

  8. Socket粘包问题终极解决方案—Netty版(2W字)!

    上一篇我们讲了<Socket粘包问题的3种解决方案>,但没想到评论区竟然炸了.介于大家的热情讨论,以及不同的反馈意见,本文就来做一个扩展和延伸,试图找到问题的最优解,以及消息通讯的最优解决 ...

  9. 直播预告 | 开源的云原生开发环境 —— Nocalhost

    直播来啦!本次云原生学院邀请到腾讯云 CODING DevOps 后端工程师王炜为大家分享<开源的云原生开发环境 -- Nocalhost>. 直播信息 讲师:王炜 - 腾讯云 CODIN ...

  10. Laya 踩坑日记-人物模型穿模,模型显示不正常

    最近做游戏,人物要跑到很远的位置,z轴距离大概有20000个单位,然后就发现一个bug,到远处人物模型穿了,而且没办法改,这就尴尬了 Z轴对应值    0    100000 100000 当距离零点 ...