zoukankan      html  css  js  c++  java
  • 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":""});
             }
        }
  • 相关阅读:
    [leetcode] Valid Sudoku
    [leetcode] Count and Say
    [leetcode] Decode Ways
    [leetcode] Sqrt(x)
    [leetcode] Best Time to Buy and Sell Stock II
    7-27 兔子繁衍问题
    7-26 最大公约数和最小公倍数
    7-25 求奇数和
    7-24 猜数字游戏
    7-23 分段计算居民水费
  • 原文地址:https://www.cnblogs.com/aixing/p/13327561.html
Copyright © 2011-2022 走看看