最简单的JavaScript validation

最新推荐文章于 2022-08-13 12:24:19 发布

原创最新推荐文章于 2022-08-13 12:24:19 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #XHTML #HTML #ViewUI

本文介绍了一种使用JavaScript进行表单验证的方法，包括检查整数、浮点数、字符串最大长度及日期格式等。通过具体函数实现不同类型的输入校验，并提供了一个HTML测试示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS validation、JS check、Form check

    //obj - input object
    //required 是否必填
    //type 校验类型,date-日期类型,num-浮点数字类型,lnum=整数
    //maxLen - 长度校验
     
      //校验整数
      function checkLNum(theNum){
              var patrn=/^[0-9]{1,20}$/;
              if (!patrn.exec(theNum)) return false
              return true  
      }
     
      //校验浮点数
      function checkNum(theNum){
              var patrn=/^[0-9.]{1,20}$/;
              if (!patrn.exec(theNum)) return false
              return true  
      }
     
      //校验最大长度
      function checkMaxLen(theStr,maxLen){
            if(theStr.length > maxLen)
                  return false;
            return true;
      }
     
      //校验日期格式，YYYY- MM-DD
      function checkDate(theDate){
        var reg = /^\d{4}-((0{0,1}[1-9]{1})|(1[0-2]{1}))-((0{0,1}[1-9]{1})|([1-2]{1}[0-9]{1})|(3[0-1]{1}))$/;
        var result=true;
        if(!reg.test(theDate))
            result = false;
        else{
            var arr_hd=theDate.split("-");
            var dateTmp;
            dateTmp= new Date(arr_hd[0],parseFloat(arr_hd[1])-1,parseFloat(arr_hd[2]));
            if(dateTmp.getFullYear()!=parseFloat(arr_hd[0])
                  || dateTmp.getMonth()!=parseFloat(arr_hd[1]) -1
                    || dateTmp.getDate()!=parseFloat(arr_hd[2])){
                    result = false
            }
        }
        return result;
      }

  function getSpanObject(spanId){
        return document.getElementById(spanId);
  }

HTML测试代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>JS Check</title>
<script Language=JavaScript src="check.js"></script>
<script Language=JavaScript>
            function formSubmit(){
                  var flag = check(testForm.startDate,true,'date',12);
                  flag = check(testForm.total,false,'num') && flag;
                  flag = check(testForm.name,true,'other',6) && flag;
                  if(flag){
                        return testForm.submit();
                  }
            }
</script>
</head>
<body>
      <form name="testForm">
            Date:<input type="text" name="startDate" onblur="check(this,true,'date',12)" /><span id="startDateErr" style="color:red"></span><br/>
            Num:<input type="text" name="total" onblur="check(this,false,'num')"/><span id="totalErr" style="color:red"></span><br/>
            String:<input type="text" name="name" onblur="check(this,true,'other',6)"/><span id="nameErr" style="color:red"></span><br/>
            <input type="button" value="Submit" onclick="formSubmit()"/>
      <form>
</body>