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

pyhy 2022-02-12 06:37 原文

【要解决的问题】

前台有一输入框,直接与后台某表某字段关联,此字段是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

推荐阅读