【JS】使用JS正则式对前端文本框进行校验，此文本框与后台字段直接关联，类型为Oracle的number(12,2)

【要解决的问题】

前台有一输入框，直接与后台某表某字段关联，此字段是number(12,2)类型，要求前台用JS限制用户输入，直到其符合后台的数据格式。

【需求分析】

Oracle的Number(12,2),其小数位最多为两位，整数位最多为十位。对此存疑请参考：https://www.cnblogs.com/heyang78/p/15887408.html

据此写出的正则分整数部分和小数部分，整数部分限制在十位，小数部分限制为一到二位，且和小数点一起出现。

【正则】

^(\\d{1,10})([.]\\d{1,2})?$

【代码】

复制代码
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>Filename</title>
    </head>

     <body onload="run();">

     </body>
</html>
<script type="text/javascript">
<!--

function run(){
    var arr=[];

    arr.push({'value':1,'expected':true,'reason':'限制在10位整数范围内','actual':true});
    arr.push({'value':1.23,'expected':true,'reason':'限制在10位整数两位小数范围内','actual':true});
    arr.push({'value':1234567890,'expected':true,'reason':'限制在10位整数范围内','actual':true});
    arr.push({'value':12345678901,'expected':false,'reason':'越过了10位整数范围','actual':true});
    arr.push({'value':0.123,'expected':false,'reason':'小数位超过了2位','actual':true});
    arr.push({'value':1234567890.99,'expected':true,'reason':'整数位未超过10小数位未超过2','actual':true});
    
    for (var i=0,n=arr.length;i<n ;i++ ){
        var item=arr[i];
        var result=isValid(item.value);
        item.actual=result;
    }

    for(var item of arr){
        console.log("数%f%s%s,预期值%s,理由:%s,实际值%s;",item.value,item.actual?'符合':'不符合','number(12,2)格式',item.expected,item.reason,item.actual);
    }    
}

//----------------------------------------------
// 后台字段定义是oracle的number(12,2)
// 前台以此书写正则对输入进行验证
//----------------------------------------------
function isValid(text){
    var reg='^(\\d{1,10})([.]\\d{1,2})?$';
    var regExp=new RegExp(reg);
    return regExp.test(text);
}


//-->
</script>
复制代码

以上粗体部分为核心校验函数。

【运行结果】

复制代码
数1符合number(12,2)格式,预期值true,理由:限制在10位整数范围内,实际值true;
数1.23符合number(12,2)格式,预期值true,理由:限制在10位整数两位小数范围内,实际值true;
数1234567890符合number(12,2)格式,预期值true,理由:限制在10位整数范围内,实际值true;
数12345678901不符合number(12,2)格式,预期值false,理由:越过了10位整数范围,实际值false;
数0.123不符合number(12,2)格式,预期值false,理由:小数位超过了2位,实际值false;
数1234567890.99符合number(12,2)格式,预期值true,理由:整数位未超过10小数位未超过2,实际值true;
复制代码

 

END

posted @ 2022-02-12 06:37  不朽的飞翔  阅读(207)  评论(1)    收藏  举报