表单验证可以通过 JavaScript 来完成

以下示例代码用于判断表单字段(Name)值是否存在，如果存在，则弹出信息，否则阻止表单提交：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>表单验证</title>

     <script type="text/javascript">

         function myFunction(){

             var x=document.forms["Form"]["Name"].value;

             if(x=null||x=="")

             {

                 alert("请输入名字！！");

                 return false;

             }

         }

     </script>

 </head>

 <body>

     <form name="Form" action="#" onsubmit="return myFunction()" method="post">

         名字：<input type="text" name="Name">

         <input type="submit" value="提交">

     </form>

 </body>

 </html>

JavaScript 验证输入的数字

示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>验证输入的数字</title>

 </head>

 <body>

     <p><strong>请输入1到10之间的数字：</strong></p>

     <input id="number">

     <button type="button" onclick="myFunction()">提交</button>

     <script type="text/javascript">

         function myFunction(){

          var x=document.getElementById("number").value;//获取id="number"的值

         //如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误

         if(isNaN(x)||x<1||x>10)

             {

                 alert("您输入有误，请输入1到10之间的数字！！！");

             }else{

         alert("您输入正确");

     }

 }

    </script>

 </body>

 </html>

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (Name) 的值为空, required 属性会阻止表单提交：

required可实现点击提交按钮，如果输入框是空的，浏览器会提示错误信息。

示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>HTML 表单自动验证</title>

 </head>

 <body>

     &nbsp;&nbsp;

   <form action="#" method="post" >

   <input type="text" name="Name" required="required">

   <input type="submit" value="提交">

   </form>

   </body>

 </html>

注：Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。

JavaScript实现表单验证的更多相关文章

  1. 第一百五十四节，封装库--JavaScript，表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  2. 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证

    封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...

  3. 第一百五十二节，封装库--JavaScript，表单验证--年月日注入

    封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...

  4. 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全

    封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...

  5. 第一百五十节，封装库--JavaScript，表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  6. 第一百四十九节，封装库--JavaScript，表单验证--验证用户名

    封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...

  7. JavaScript：表单验证模型

    之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...

  8. JavaScript常用表单验证正则表达式（身份证、电话号码、邮编、日期、IP等）

    身份证正则表达式 //身份证正则表达式(15位)isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//身份证正则表达式 ...

  9. JavaScript之表单验证讲解

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

随机推荐

  1. HOJ 2156 &POJ 2978 Colored stones（线性动规）

    Colored stones Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1759 Accepted: 829 Descrip ...

  2. PAT天梯赛L2-004 这是二叉搜索树吗【递归】

    L2-004. 这是二叉搜索树吗? 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 一棵二叉搜索树可被递归地定义为具有下列性质的 ...

  3. 内核futex的BUG导致程序hang死问题排查

    https://mp.weixin.qq.com/s/sGS-Kw18sDnGEMfQrbPbVw 内核futex的BUG导致程序hang死问题排查 原创: 王领先 58架构师 今天   近日,Had ...

  4. LoadRunner-参数化（界面说明）

    1.Parameter type:参数类型 2. Select columm :选择列的方式,可以通过列编号或名称. By number:通过列编号  比如参数accounts位于第1列,passwo ...

  5. BZOJ1012最大数 [JSOI2008] 单调栈+二分

    正解:单调栈+二分查找(or,线段树? 解题报告: 拿的洛谷的链接quq 今天尝试学习了下单调栈,然后就看到有个博客安利了这个经典例题?于是就去做了,感觉还是帮助了理解趴quqqqqq 这题,首先,一 ...

  6. flask中的信号量

    一.在flask中自定义信号 from flask import Flask, current_app, flash, render_template from flask.signals impor ...

  7. jquery两稳定版本比较~~

    jquery历经了多个版本的更新,版本上的比较貌似没什么必要性,一般来说新的版本会比旧的版本各方面都略有提升,但由于新版中增加了各种新的功能,难免会引起bug的发生.评估一个版本是否适合当前开发场景使 ...

  8. 启动rabbitmq，提示ERROR: node with name "rabbit" already running on "localhost"

    ➜ ~ rabbitmq-server ERROR: node with name "rabbit" already running on "localhost" ...

  9. [dt]世纪历史长河年代表

    年代口诀 夏商与西周, 东周分两段, 春秋和战国, 一统秦两汉, 三分魏蜀吴, 二晋前后延, 南北朝并列, 隋唐五代传, 宋元明清后, 皇朝至此完. 中国历史长河年代表 参考: 中国历史朝代顺序表.年 ...

  10. [kx]为什么计算机能读懂 1 和 0 ？

    CPU如何实现运算的? 下面是一个小伙的总结, 从物理电路到逻辑运算到数字电路,一步一步的好理解. 最好能看看那本<编码 隐匿在计算机软硬件背后的语言>的书. 为什么计算机能读懂 1 和 ...