HTML 表单 非空校验

最新推荐文章于 2022-11-28 12:57:49 发布
最新推荐文章于 2022-11-28 12:57:49 发布
阅读量2.1k 收藏 8
点赞数 2
文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/upupoo0/article/details/112135311
版权 
<html>
    <head>
        <title></title>
        <style type="text/css">
         td{font-family:宋体;font-size:12px;color:blue;}
          p{font-family:宋体;font-size:12px;color:blue;}
       </style>
       <script type="text/javascript">
                function check()
                {
                       var name=document.getElementById("name").value;
                       var school=document.getElementById("school").value;
                       var major=document.getElementById("major").value;
                       var age=document.getElementById("age").value;
                       var sex=document.getElementById("sex").value;
                       var speciality=document.getElementById("speciality").value;
                       var prize=document.getElementById("prize").value;
                       if(name=="")//如果用户输入的用户名为空
                       {
                              alert("姓名为空");
                              return false;
                        }
                       else
                       {
                              if(school=="")
                              {
                                     alert("学校为空");
                                     return false;
                               }
                              else
                              { 
                                     if(major=="")
                                    {
                                         alert("专业为空");
                                         return false;
                                     }
                                     else
                                     {
                                           if(age=="")
                                          {
                                               alert("年龄为空");
                                               return false;
                                          }
                                           else
                                          { 
                                              var temp=age;
                                              if(temp<20)
                                                 {
                                                    alert("年龄小于20");
                                                    return false;
                                                  }
                                                  else
                                                  {
                                                    if(sex=="")
                                                    {
                                                      alert("性别为空");
                                                       return false;
                                                    }
                                                    else
                                                   { 
                                                       if(speciality=="")
                                                      {
                                                          alert("特长为空");
                                                          return false;
                                                       }
                                                       else
                                                      { 
                                                          if(prize=="")
                                                         {
                                                           alert("获奖信息为空");
                                                           return false;
                                                         }
                                                      }
                                                    }
                                                  }
                                          }
                                     }
                             }

                       }
              }
           </script>
    </head>
    <body>
         <form name="forml" onsubmit="return check()">
          <h1 align="center"><p>个人简历</p></h1>
                 <table border="2" align="center" width="80%" >
                 <tr>
                     <td width="30%" align="right" >姓&nbsp;&nbsp;名</td>
                     <td width="70%   align="left"><input type="text" id="name"></td>
                 </tr>
                 <tr>
                     <td width="30%" align="right">毕业院校</td>
                     <td width="70%   align="left"><input type="text" id="school"></td>
                 </tr>
                 <tr>
                     <td width="30%" align="right">专&nbsp;&nbsp;业</td>
                     <td width="70%   align="left"><input type="text" id="major"></td>
                 </tr>
                 <tr>
                     <td width="30%" align="right">年&nbsp;&nbsp;龄</td>
                     <td width="70%   align="left"><input type="text" id="age"></td>
                 </tr>
                 <tr>
                     <td width="30%" align="right">性&nbsp;&nbsp;别</td>
                     <td width="70%   align="left"><input type="text" id="sex"></td>
                 </tr>
                  <tr>
                     <td width="30%" align="right">特&nbsp;&nbsp;长</td>
                     <td width="70%   align="left"><input type="text" id="speciality"></td>
                 </tr>
                  <tr>
                     <td width="30%" align="right">获奖信息</td>
                     <td width="70%   align="left"><input type="text" id="prize"></td>
                 </tr>
                 </table>
                 <center>
                    <input type="submit"    value="提交">
                    &nbsp;&nbsp;&nbsp;
                    <input type="reset"     value="重置">
                    &nbsp;&nbsp;
                 </center>
            </form>
    </body>
</html>
yhs ehT
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui vue 表单校验
12-21
element-ui vue 表单校验
JavaScript验证表单数据，HTML自动验证表单数据是否为空，数字范围
Rosen's
07-26 1373
典型数据验证： a.字段是否为空； b.输入内容是否合法(例如数字字段是否输入了文本，email格式是否正确等) 数据验证时可通过javaScript进行表单验证，也可提交表单，在服务器端验证。通常情况下，更多的使用表单验证，效率更高。 onsubmit表单验证 <html> <head> <meta charset="utf-8"> <title&g...
【HTML+CSS+JS】简单的登录注册验证
NpcCat的博客
11-28 6330
简单的登录注册验证
使用css判断输入是否为空
开心就好的专栏
08-21 8849
上面这张图是某设计稿的一部分, 两个输入框分别为密码和重复密码. 看第一个密码输入框的那几个黑点, 比正常的大, 相邻两个的间距也比较大, 看起来比较协调. 正常情况下, 那几个黑点是挤在一起的, 而且比较小. 可能我们从来没管过这个, 这个确实没什么影响, 不过昨天我忽然想到这个效果怎么实现, 折腾了一下. 仔细思考下, 我们要的是什么样的效果呢? 在输入不为空的情况下, 黑点的间...
EduCoder-Web程序设计基础-html5— 对表单进行验证-第2关：非空校验
weixin_51402180的博客
12-04 1370
目录任务描述相关知识编程要求测试说明代码示例 任务描述 本关任务：创建一个单行文本框，并要求该文本框的值不能为空。 相关知识 为了完成本关任务，你需要掌握：1.文本框的设置，2.required属性，3.maxLength属性。 非空校验示例 在表单text类型的input标签中添加required属性，可以设置文本框的值不能为空；在该标签中通过title属性可以设置相关的提示信息。 用户名： 用户名： 15343480696 编程要求 根据提示，在右侧编辑器补充代码，在右侧编辑器中
【HTML】HTML实现简单表单验证（正则表达式、非空判断、输入框提示信息）
A Lucky Boy的博客
02-20 5433
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>练习.
前端开发_HTML5_标签部分(六)
u013185175的博客
12-13 1414
一、表单(form) 1.表单概述 表单标签是和后台数据交互的一种重要的方式，在网页中使用表单的频率非常的高。一般表单标签中会包含多个控件便于用户在页面输入数据，然后通过指定的方式把数据提交给后台，实现前后台的数据交互。 2.表单标签 - form (1)、该标签的作用:该标签可以生成一个表单,定义一些表单的相关信息。 (2)、标签语法 form标签的语法: <form name="表单的名称" id="表单的id" action="表单数据提交的地址" method="g...
HTML5自带的表单验证
懒得安分的博客
08-24 2583
HTML5对表单元素提供了 patern 属性，它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达就会弹出提示框，并阻止表达提交。提示框内的文字可以使用 setCustomValidity 方法来自定义。 　　比如下面这个表单内，文本框只接受大陆的手机号，输入其它东西就无法提交 　　<form> <input id="text" patte
html实现简单非空验证和登录验证
weixin_66489187的博客
10-27 2363
实现简单非空验证和登录验证
Html+Css+Js注册验证(正则表达式)
gly_technology的博客
02-13 1861
完整的注册界面操作，通过正则表达式来验证！
vue表单自定义校验规则介绍
10-18
今天小编就为大家分享一篇vue表单自定义校验规则介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
微信小程序实现表单校验功能
08-29
微信小程序最难实现的公共业务是什么？应该是表单校验，这篇文章主要介绍了微信小程序如何实现表单校验功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jq 表单校验工具
01-10
传 参 ，校验表单，支持正则，文本长度，ajax, 自定义函数校验。
使用JavaScript进行表单校验功能
10-19
最近在学习JavaScript，因此想到使用js实现表单校验。下面通过本文给大家分享使用javascript实现表单校验功能的步骤，需要的的朋友参考下吧
纸箱预订表单HTML模板
04-08
纸箱预订表单HTML模板是一款简洁的客户信息填写表单网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
html完整的表单不为空复选框,提交带有空复选框的HTML表单
weixin_33917217的博客
06-09 183
小智..5这是一个使用javascript的简单解决方法:在提交包含复选框的表单之前,将"关闭"设置为0并检查它们以确保它们提交.例如,这适用于复选框数组./////示例//////给出一个id ="formId"的表单RGBif($_POST['cb'][$i] == 0) {// empty} elseif ($_POST['cb'][$i] == 1) {// checked} else {...
HTML js非空验证
Coding
12-18 3552
JS验证表单内容function validNull(theId,msg){  if(document.getElementByIdx_x_x(theId).value=="")  {  window.alert(msg);  document.getElementByIdx_x_x(theId).focus();  return true;  }  }     function submitCh
HTML表单校验非空的两种方式
liwei131421的博客
04-11 3311
HTML表单校验非空的两种方式第一种方式第二种方式实例：校验表单中姓名为非空 第一种方式 let reg = /\S/; 第二种方式 let reg_name = /^\w+$/; 实例：校验表单中姓名为非空 该代码用于验证表单中姓名是否为空，当用户名为空时，边框显示为红色！ //验证姓名 function checkName(){ //获取姓名 let name = $...
HTML的form表单非空校验,原生Js表单验证，Js验证表单是否为空，Js前端验证空值...
weixin_32869031的博客
06-15 846
为了缓解服务器压力，一般先在前端进行验证表单，当然后端也要做验证，后端的验证主要是在技术人员突破前端限制而设计的，是为了整个安全，前端的验证是第一道防线，主要也是可以缓解服务器压力，为了前端能够快速验证，不引入其他库，所以采用原生js验证。原生JS表单验证原生JS表单验证function check() {var form = document.getElementById('form'); //...
实现客户端的非空校验
最新发布
05-25
实现客户端的非空校验可以使用 JavaScript 来实现。以下是一个示例代码： ```html <label for="username">Username: <input type="text" id="username" name="username"><br> <label for="password">Password:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值