首页 web前端 js教程 javascript 一个完整的表单验证实例

javascript 一个完整的表单验证实例

Jun 01, 2016 am 09:55 AM
js 表单 验证

<code class="language-html"> 
    
    <script language="JavaScript">
    function validatePersonalInfo(){<!--  w ww. j a  va 2s . c o  m-->
      var _first = document.info.fname.value;
      var _last = document.info.lname.value;
      var _street = document.info.street.value;
      var _city = document.info.city.value;
      var _zip = document.info.zip.value;
      var _phone = document.info.phone.value;
      var _email = document.info.email.value;

      if(_first.toString() == ""){console.log("Please enter a first name.");}
      if(_last.toString() == ""){console.log("Please enter a last name.");}
      if(_street.toString() == ""){console.log("Please enter your street name.");}
      if(_city.toString() == ""){console.log("Please enter your city.");}
      if(_zip.toString() == ""){console.log("Please enter your zip.");}
      if(_phone.toString() == ""){console.log("Please enter your phone number.");}
      if(_email.toString() == ""){console.log("Please enter your email.");}
      

        var checkZip = checkNum(5);
        var phoneInput = document.info.phone.value;
        var validPhone = false;
        var validZip = false;
         if(checkZip == true){
            validZip = true;
         }
         else{
           console.log("Invalid Zip Code" + validZip);
         }
         if(!checkPhone(phoneInput)){
               console.log("Phone number is invalid." + validPhone);
            }
         else{
             validPhone = true;
         }
         if(validZip && validPhone){
            console.log("Your form has been verified");
         }
    }
    
    // Strips hyphens out of phone number and verifies that
    // phone number is valid. Any phone number in the format
    // xxxxxxxxxx, xxx-xxx-xxxx, or (xxx)xxx-xxxx will be valid

    function checkPhone(str){
      var regexp = /^(\d{10}|\d{3}-\d{3}-\d{4}|\(\d{3}\)\d{3}-\d{4})$/;
       return regexp.test(str);
    }
    function checkNum(length){
      var zipEntry = document.info.zip.value;
      var zipNum = parseInt(zipEntry, 10);
      if (document.info.zip.value.length == length){
        if(zipNum != 0 && isNaN(zipNum) == false){
          return true;
        }
        else {
          return false;
        }
      }
      else {
        return false;
      }
    }
    </script>
    
    
    <form name="info" action="" method="post">
    <table>
    <tr>
<td align="left">First Name:</td>
    <td align="left">
    <input type="text" name="fname" size="15">
    Last Name:
    <input type="text" name="lname" size="20">
    </td>
    </tr>
    <br>
    <tr>
<td align="left">Street:</td>
    <td align="left">
    <input type="text" name="street" size="30">
</td>
    </tr>
    <br>
    <tr>
    <td align="left">City:</td>
    <td align="left">
    <input type="text" name="city" size="15">
    State:
    <select name="state">
    <option value="AL">AL
    </option>
<option value="AK">AK
    </option>
<option value="AZ">AZ
    </option></select>
    Zip:
    <input type="text" name="zip" size="7">
    </td>
    </tr>
    <br>
    <tr>
<td align="left">Phone (w/area code):</td>
    <td align="left">
    <input type="text" name="phone" size="20">
</td>
    </tr>
    <br>
    <tr>
<td align="left">Email:</td>
    <td align="left">
    <input type="text" name="email" size="20">
</td>
    </tr>
    <br>
    </table>
    <input type="button" value="Submit" onclick="validatePersonalInfo()">
    </form>

</code>
登录后复制

简单讲一下js语法:

document.info.fname.value

这个js表示获取name为info表单里面name是fname的input的值。

其他方法类似。

你可以将代码复制到这里运行一把

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在PDF中验证签名 如何在PDF中验证签名 Feb 18, 2024 pm 05:33 PM

我们通常接收到政府或其他机构发送的PDF文件,有些文件带有数字签名。验证签名后,我们会看到SignatureValid消息和一个绿色勾号。如果签名未验证,会显示有效性未知。验证签名很重要,下面看看如何在PDF中进行验证。如何在PDF中验证签名验证PDF格式的签名使其更可信,文档更容易被接受。您可以通过以下方式验证PDF文档中的签名。在AdobeReader中打开PDF右键单击签名,然后选择显示签名属性单击显示签名者证书按钮从“信任”选项卡将签名添加到“受信任的证书”列表中单击验证签名以完成验证让

微信好友辅助验证进行解封的详细方法 微信好友辅助验证进行解封的详细方法 Mar 25, 2024 pm 01:26 PM

1、打开微信进入后,点击搜索图标,输入微信团队,点击下方的服务进入。2、进入后,点击左下方的自助工具的选项。3、点击后,在上方的选项内,点击解封/申诉辅助验证的选项。

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤 股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤,需要具体代码示例随着互联网和科技的快速发展,股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环,其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

推荐:优秀JS开源人脸检测识别项目 推荐:优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

PHP 8 新特性:增加了验证和签名 PHP 8 新特性:增加了验证和签名 Mar 27, 2024 am 08:21 AM

PHP8是PHP的最新版本,为程序员带来了更多的便利和功能。这个版本特别关注安全性和性能,其中一个值得注意的新特性是增加了验证和签名功能。在本文中,我们将深入了解这些新的功能及其用途。验证和签名是计算机科学中非常重要的安全概念。它们通常用于确保传输的数据是完整和真实的。在处理在线交易和敏感信息时,验证和签名变得尤为重要,因为如果有人能够篡改数据,可能会对

PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

如何使用PHP和JS创建股票蜡烛图 如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形,通过绘制股票的开盘价、收盘价、最高价和最低价等数据,帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图,并附上具体的代码示例。一、准备工作在开始之前,我们需要准备以下环境:1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

steam登录卡在手机令牌验证怎么解决? steam登录卡在手机令牌验证怎么解决? Mar 14, 2024 pm 07:35 PM

  steam是一款游戏爱好者都在使用的平台,这里能够领取购买很多的游戏,而近期有很多用户在登录Steam的时候出现了卡在手机令牌验证的界面,无法登录成功,面对这种情况,大多数用户都是不知道怎么解决的,没有关系,今日软件教程就来为广大用户们进行解答,有需要的朋友可到查看操作方法。  steam手机令牌报错?  解决办法一:软件问题  首先在手机上找到steam软件设置,请求协助页面,并确认使用该设备网络运行正常,再次单击确定,点击发送短信,即可在手机页面收取到验证码,即可完成验证,解决处理请求时

See all articles