Javascript表单验证

最新推荐文章于 2023-02-05 11:23:33 发布

阳光下的冷静

最新推荐文章于 2023-02-05 11:23:33 发布

阅读量3.1k

点赞数 2

分类专栏： javascript 文章标签： JavaScript表单验证必填项验证 E-mail验证日期验证数据域验证

本文链接：https://blog.csdn.net/m0_37686205/article/details/85944870

版权

javascript 专栏收录该内容

111 篇文章 1 订阅

订阅专栏

JavaScript表单验证：

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

JavaScript验证内容：

验证表单数据是否为空？
验证输入是否是一个正确的email地址？
验证日期是否输入正确？
验证表单输入内容是否是为数字型？

逐个分析JavaScript表单验证内容：

必填(或必选)项目

该验证用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）。

JavaScript代码如下：

function validateForm()
{
  var x=document.forms["myForm"]["fname"].value;//获取要验证的input的内容
  if (x==null || x=="")
  {
    alert("姓必须填写");
    return false;
  }
}

以上函数在form表单提交时被调用。放在HTML代码中完整代码如下：

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

E-mail验证

该验证函数用来检查输入的数据是否符合电子邮件的基本语法。基本语法为输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号

JavaScript代码如下：

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");  //找到@符号所在的位置
  var dotpos=x.lastIndexOf(".");  //找到最后一个.所在的位置
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
  }
}

下面是连同HTML表单的完整代码：

<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
    Email: <input type="text" name="email">
    <input type="submit" value="提交">
</form>

日期验证

JavaScript和HTML完整代码如下：


<body>

    输入您要验证的日期：<input type="text" id="date" name="date" /><br /><br />

    <input type="button" id="btnValid" value="验证日期格式" onclick="IsDate()" />

<script>

        /**判断输入框中输入的日期格式为yyyy-mm-dd和正确的日期 */

        function IsDate() {

            //我们将在这个方法里面进行日期格式的检测

            //正则表达式

            var reg = /^(\d{4})-(\d{2})-(\d{2})$/;

            //输入的日期

            var str = document.getElementById("date").value;

            //用正则表达匹配

            var arr = reg.exec(str);

            if (str == "") {

                alert("请输入日期");

            }

            else if (!reg.test(str) && RegExp.$2 <= 12 && RegExp.$3 <= 31) {

                alert("请保证输入的为yyyy-mm-dd日期格式");

            } else {

                alert("日期格式正确");

            }

        }

    </script>


</body>

数据域验证

JavaScript和HTML完整代码如下：

<form name="myForm" action="demo-form.php" onsubmit="return isNumber();" method="post">
    金额: <input type="text" name="account">
    <input type="submit" value="提交">
</form>

<script type = 'JavaScript'>
function isNumber(){
  var x=document.forms["myForm"]["account"].value;
   if (x==="" || x==null ){
    return false;
  }else if(!isNaN(x)){
      alert("请输入数字类型的字段");
  }else{
    return true;
  }
}
</script>