• 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":""});
             }
        }
  • 相关阅读:
    课后作业成绩汇总
    关于作业提交要求声明 2017-09-22
    团队编程项目作业成绩汇总
    结对项目作业成绩汇总
    团队组信息
    小知识记录:第XI篇
    小知识记录:第X篇
    小知识记录:第十二篇
    小知识记录:第十一篇
    小知识记录:第十篇
  • 原文地址:https://www.cnblogs.com/aixing/p/13327561.html
Copyright © 2020-2023  润新知