JavaScript表单验证

最新推荐文章于 2022-03-07 12:30:09 发布

qsong_213

最新推荐文章于 2022-03-07 12:30:09 发布

阅读量424

点赞数

分类专栏： web前端开发文章标签： javascript 表单 html

本文链接：https://blog.csdn.net/Songzaozao/article/details/50496509

版权

web前端开发专栏收录该内容

0 篇文章 0 订阅

订阅专栏

JavaScript表单验证整理：

1：必填项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
    //验证文本框是否为空，为空，则不能提交

    function validateForm(){
        var x=document.forms["myForm"]["fn"].value;
        if(x==null || x==""){
            alert("姓名必须填写");
            return false;
        }

    }
    </script>
</head>

<body>
   <!--form 表单验证，name属性-->
   <form name="myForm" action="js01.html" οnsubmit="return validateForm()" method="post">
   姓名: <input type="text" name="fn">
         <input type="submit" value="提交">
   </form>
</body>
</html>

2：邮箱验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
       function myFunction(){
           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("Not a vaild e-mail address");
               return false;
           }
       }
    </script>
</head>
<body>
    <!--return的作用是阻止跳转至下一个页面-->
    <form name="myForm" action="js02.html" οnsubmit="return myFunction()" method="post">
       邮箱：<input type="text" name="email">
            <input type="submit" value="Submit">
    </form>
</body>
</html>

qsong_213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript表单验证

JavaScript表单验证整理： //验证文本框是否为空，为空，则不能提交 function validateForm(){ var x=document.forms["myForm"]["fn"].value; if(x==null || x==""){
复制链接

扫一扫

专栏目录