功能描述:

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

源码:

前台:

<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. Spring-构造注入&注解注入&代理模式&AOP

    1.   课程介绍 1.  依赖注入;(掌握) 2.  XML自动注入;(掌握) 3.  全注解配置;(掌握) 4.  代理模式;(掌握) 5.  AOP;(掌握) 依赖注入;(掌握) 2.1.  构 ...

  2. eclipse中把spring源码关联至当前工程

    1.下载并导入spring的相关jar包下载对应版本的spring 2.在当前工程中,选择Referenced Libraries,展开后,选择相应的jar包,右击并选择Properties 3. 在 ...

  3. 使用IDEA构建Spring Boot项目简单实例

    一.介绍 它的目标是简化Spring应用和服务的创建.开发与部署,简化了配置文件,使用嵌入式web服务器,含有诸多开箱即用的微服务功能,可以和spring cloud联合部署. Spring Boot ...

  4. 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击

    风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...

  5. fastjsion反序列化漏洞渗透测试笔记

    本文原创地址:https://www.cnblogs.com/yunmuq/p/14268028.html 一.背景 fastjsion是阿里的开源Java工具:https://github.com/ ...

  6. Databricks 第6篇:Spark SQL 维护数据库和表

    Spark SQL 表的命名方式是db_name.table_name,只有数据库名称和数据表名称.如果没有指定db_name而直接引用table_name,实际上是引用default 数据库下的表. ...

  7. SpringBoot魔法堂:@MatrixVariable参数注解使用详解

    前言 RFC3986定义URI的路径(Path)中可包含name-value片段,扩充了以往仅能通过查询字符串(Query String)设置可选参数的囧境. 假如现在需要设计一个用于"搜索 ...

  8. 【JS学习】数组过滤方法的使用filter

    前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 使用效果: 可以返回参数函数为真的值 //情景:实现从stu数 ...

  9. three.js 之cannon.js物理引擎

    今天郭先生说的是一个物理引擎,它十分小巧并且操作简单,没错他就是cannon.js.这些优点都源自于他是基于js编写的,对于js使用者来说cannon.js拥有其他物理引擎没有的纯粹性.从学习成本来看 ...

  10. 【Oracle】查询执行慢的sql

    查询执行最慢的sql select * from (select sa.SQL_TEXT, sa.SQL_FULLTEXT, sa.EXECUTIONS "执行次数", round ...