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,一个是用户名,一个 ...
随机推荐
- python-scrapy爬取某招聘网站(二)
首先要准备python3+scrapy+pycharm 一.首先让我们了解一下网站 拉勾网https://www.lagou.com/ 和Boss直聘类似的网址设计方式,与智联招聘不同,它采用普通的页 ...
- 30天自制操作系统-day1
30天自制操作系统(linux环境)--第一天 我是在CentOS的环境上面实现的,使用ubuntu的环境也是类似的 第一步:因为要对二进制文件进行编辑,所以安装二进制编辑器hexedit(当然其他的 ...
- Docker学习(二)- Docker 安装 Jenkins
一.拉取镜像 我这里安装的版本是2.222.3-centos,可以去这里获取你需要的版本: https://hub.docker.com/_/jenkins?tab=tags docker pull ...
- 【Azure Redis 缓存】Azure Redis功能性讨论
关于使用Azure Redis服务在以下九大方面的功能性的解说: 高可用 备份可靠性 配置自动化 部署多样性 快速回档功能 数据扩容 SLA稳定性 数据安全性 监控系统 一:高可用 Azure Cac ...
- Vim 自动添加脚本头部信息
每次写脚本还在为忘记添加头部信息啥的烦恼? 按照下面这么做,帮你减轻点烦恼. # 打开配置文件: vim /root/.vimrc # 添加如下信息: autocmd BufNewFile *.sh ...
- python模块详解 | filecmp
简介: filecmp是python内置的一个模块,用于比较文件及文件夹的内容,它是一个轻量级的工具,使用非常简单 两个主要的方法: filecmp.cmp(f1, f2[, shallow]) 比较 ...
- Payment Spring Boot 1.0.4.RELEASE 发布,最易用的微信支付 V3 实现
Payment Spring Boot 是微信支付V3的Java实现,仅仅依赖Spring内置的一些类库.配置简单方便,可以让开发者快速为Spring Boot应用接入微信支付. 欢迎ISSUE,欢迎 ...
- ctfhub技能树—信息泄露—PHPINFO
打开靶机 查看页面,是PHP info界面 只有这一个页面,查找一下有没有flag 拿到flag 浅谈ctf中phpinfo需要关注的点(转自先知社区) 1 https://xz.aliyun.com ...
- 【葵花宝典】kolla部署OpenStack-AllinOne
1.关闭防火墙以及内核安全机制 systemctl stop firewalld systemctl disable firewalld ##永久性关闭 setenforce 0 sed -i 's/ ...
- 24V转3.3V稳压芯片,高效率同步降压DC-DC变换器3A输出电流
PW2312是一个高频,同步,整流,降压,开关模式转换器与内部功率MOSFET.它提供了一个非常紧凑的解决方案,以实现1.5A的峰值输出电流在广泛的输入电源范围内,具有良好的负载和线路调节. PW23 ...