HTML5+Javascript表单注册和验证练习

最新推荐文章于 2024-03-04 10:17:22 发布
最新推荐文章于 2024-03-04 10:17:22 发布
阅读量3.6k 收藏 23
点赞数 3
分类专栏： HTML5+Javascript+css 文章标签： HTML5 Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MyLovelyJay/article/details/82707134
版权

这里写图片描述

//html5.html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单注册和验证</title>
    <script type="text/javascript" src="hello.js"></script>
</head>
<body>
    <form name="form1"  id="form1" method="post" action="reg2.jsp">
    <table border="1"  align="center" width="350">
        <tr align="middle"><th colSpan=2 height=24>新用户注册</th></tr>
        <tr>
            <td width="40%">
                <b>用&nbsp;户&nbsp;名</b></td>
            <td width="60%"> <input type="text" name="uid" size="30" maxlength="10"></td>
        </tr>

        <tr>
            <td><b>性&nbsp;&nbsp;&nbsp;&nbsp;别</b>:</td>
            <td>
             <input type="radio" checked="CHECKED" name="gender" value="boy" >男孩
             <input type="radio" name="gender" value="girl">女孩
            </td>
        </tr>
        <tr>
              <td><B>密&nbsp;&nbsp;&nbsp;&nbsp;码</B>:</td>
              <td><input type="password" name="psw1" size="32"></td>
        </tr>

        <tr>
             <td><B>确认密码</B></td>
             <td><input type="password" name="psw2" size="32"></td>     
        </tr>

        <tr>
             <td><B>密码问题</B></td>
             <td><input type="question" name="text" size="30"></td>     
        </tr>

        <tr>
             <td><B>问题答案</B></td>
             <td><input type="text" name="answer"  size="30"></td>
        </tr>

        <tr>
             <td><B>email</B></td>
             <td><input type="text" name="email" size="30" maxlength="50"></td>
        </tr>
        <tr>
             <td><B>联系电话</B></td>
             <td><input type=" text" name="tel" size="30" maxlength="50"></td>
        </tr>

        <tr>
            <td><b>职&nbsp;&nbsp;&nbsp;&nbsp;业</b>:</td>
            <td>  <select   name="career"  class="input1">
                   <option  value="student"  selected="selected">学生</option>
                   <option  value="teacher">老师</option>
                   <option  value="worker">工人</option>
                   <option  value="famer">农民</option>
                   <option  value="business">商人</option>
                   </select> 
            </td>
        </tr>
         <tr>
            <td></td>
            <td>
                   <input type="submit" value="注册" name=submit onclick="return check()">
                  <input type="reset"  value="清除" name=submit2></option>
            </td>
         </tr> 
       </table>
    </form>
</body>
</html>
//hello.js

function showEnter(){
       alert("尊敬的客户，欢迎您光临本店");
}

function showLeave(){

      alert("欢迎下次光临!");
}

//页面加载事件时调用函数
window.onload = showEnter;

//页面关闭事件触发时调用函数
window.onbeforeunload = showLeave;



function isEmail(theStr)
{
     var atindex = theStr.indexOf('@');
     var dotindex = theStr.indexOf('.',atindex);
     var flag = true;
     thesub = theStr.substring(0,dotindex + 1);

     if((atindex < 1) || (atindex != theStr.lastIndexOf('@')) || (dotindex < atindex + 2) || (theStr.length <= thesub.length))
     {
         flag = false;
     }else
     {
         flag = true;
     }
     return(flag);
}




function check()
{
    fr = document.form1;
    if(fr.uid.value == "") 
    {
      alert("用户ID必须要填写！");
       fr.uid.focus();
       return false;
    }
    if((fr.psw1.value != "") || (fr.psw2.value != ""))
    {
      if(fr.psw1.value != fr.psw2.value)
      {
          alert("密码不一致，请重新输入并验证密码！");
          fr.psw1.focus();
          return false;
      }
  }
  else{
       alert("密码不能为空！");
       fr.psw1.focus();
       return false;
  }
  if(fr.gender.value == "")
  {
     alert("性别必须要填写!");
     fr.name.focus();
     return false;
  }

   if(fr.email.value != "")
   {
       if(!isEmail(fr.email.value))
       {
           alert("请输入正确的邮件名称");
           fr.email.focus();
          return false;
       }
   }
  fr.submit();
}
全职编程-叶湫
关注
  • 3
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML表单的构建与验证
吃不胖.
07-27 502
本文将对HTML表单的构建与验证内容进行详细探讨，包括表单元素、表单验证和常见问题解决方案。表单验证是指在用户提交表单数据之前检查用户输入的数据是否符合预期的规则和格式。下拉列表用于让用户从多个选项中选择一个选项，但与单选按钮不同的是，下拉列表可以显示多个选项，而不需要使用单选按钮的样式。文本域用于让用户输入多行文本内容，它与文本框不同的是，它可以显示多行文本内容，而不是单行文本。以上是常用的表单控件类型，还有一些其他的表单控件类型，如文件上传控件、日期选择器等。下面是一些常用的表单验证规则。
页面登录+人物介绍+图片合集.zip
10-25
（javaScript+css+HTML5）前端集合，登录表单验证，仿百度页面，照片3D展示 java工程师必练习的项目
HTML + CSS + JavaScript 实现注册页面信息验证 详细教程（表单验证）
射手座轩木酱的代码天地~
05-13 1万+
本文介绍使用HTML + CSS + JavaScript 实现注册页面信息验证的详细方法。完整代码见文章末尾。对注册信息进行判断，判断其是否符合要求。（如：密码6-12位字符，不能有空格等）这里拿用户名和密码进行验证：用户名和密码都是6-12位字符，不能有空格。我们可以使用三个块标签，可以将这三个部分分别放到每个块标签中。不过这个时候还没有验证功能，下面将实现这一功能。（用户名/密码格式是否正确）创建一个注册页面，如下图。第一部分：两个段落文本。第三部分：登录/有账号。
Chapter2——利用form表单实现注册页面
最新发布
qq_34933348的博客
03-04 909
利用form表单实现注册页面
HTML5中表单验证的8种方法
热门推荐
teresa502的专栏
01-21 3万+
在深人探讨表单验证之前，让我们先思考一下表单验证的真实含义。就其核心而言，表单验证是一套系统，它为终端用户检测无效的控件数据并标记这些错误。换言之，表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。 但是真正的表单验证是什么？ 是一种优化。 之所以说表单验证是一种优化，是因为仅通过表单验证机制不足以保证提交给服务器的表单数据是正确和有效的。另一方面，设计表单验证是为了让W
HTML5表单验证
qq_43711676的博客
03-21 2488
HTML5基本表单验证特征 属性名 说明 placeholder 在输入框无内容时显示灰色提示 autocomplete 部分输入框和form都可以设置自动提示 off关闭，on开启（默认是on） autofocus 让input自动获取焦点 required 设置表单元素为必填 pattern 表单验证使用正则 novalidate 该属性使用在form标签上，让设置了验证的表单可以直接提交 formnovalidate 该属性使用在提交按钮上，让设置了验证的表单可
JavaScript实现注册页面的表单验证
03-10 8836
基于javaweb的学习以及为后面做项目做基础，其次参考资料做了些琢磨来实现这个登录界面的注册的验证，下面是效果图（顺便附加素材） 下面是代码展示 1.注册界面register.html 无标题文档 会员注册 会员邮箱: 请输入有效的邮箱地址 会员名:
web前端加众多css、jQuery还有js的作业 静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计
12-31
遇到网页设计问题的童鞋也可以提问，这些年总结了一些学生网页制作的经验:一般的网页作业需要融入以下知识点: div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频Flash的应用、ul li、下拉...
html入门到放弃笔记
05-15
HTML + JavaScript + Ajax + CSS 赵旭 [email protected] HTML5 1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 ...
D1-HTML-Practice:D1-HTML实践
03-06
HTML5表单教程和练习 和现在开始： 表单在HTML，CSS和Javascript领域是如此重要，以至于我决定对它们进行专门的培训，以专注于HTML默认情况下所带来的所有输入，按钮和元素，从而着重于交互。 在这些练习中，您将...
html表单验证代码网页表单验证
11-29
网页表单验证
会员注册表单验证HTML模板
05-01
会员注册表单验证HTML模板，有简单表单验证功能，可验证用户名、邮箱、密码、确认密码是否为空。
JavaScript表单验证及注册界面
weixin_44593658的博客
11-07 3068
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 表单数据经常需要使用 JavaScript 来验证其正确性 下面是今天这个界面的 HTML CSS JavaScript 部分关键代码 <div class="form-body"> <div class="input"> <div class="typ...
html实现注册验证表单,JavaScript实现表单注册、表单验证、运算符功能
weixin_32818919的博客
06-23 908
JavaScript 是世界上最流行的脚本语言。JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。JavaScript 被设计为向 HTML 页面增加交互性。许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的 JavaScript 片段添加到网页中。特点：轻量级、通用、可插入html设计、易学J...
html用户注册表单验证码,简易版用户注册表单验证功能
weixin_39689428的博客
06-17 1393
HTML、CSS、JavaScript实现简易版用户注册表单验证功能以下代码使用原生HTML、CSS、JS编写完成，可以直接在浏览器中解析运行查看效果，由于代码只完成了简单的验证功能，所以仅作为练手与参考的作用。功能要求：1.用户名不能为空2.用户名必须在6-14位之间3.用户名只能有数字和字母组成，不能含有其他符号(正则表达式)4.密码和确认密码一致，邮箱地址合法5.统一是去焦点验证6...
HTML 表单和验证
weixin_44212853的博客
06-16 3139
必填：required。写在input上。鼠标聚焦：刷新时聚焦：autofocus。写在input上。点击提示文字，聚焦到输入框：标题和input 表单不验证，解除required等：表达验证：pattern=“正则表达式 ”历史记录联想：autocomplete=“on/off”表单下拉提示框:注意list="province"和id=“province” search伪类元素美化 number表单设置最大长度，无法使用maxlength等，以下使用js方法 设置步长:点击按
HTML表单注册页面校验
weixin_51012090的博客
07-15 1490
文章目录 校验用户名 校验密码 校验Email 校验姓名 校验用户名 //校验用户名 function checkUsername() { //1. 获取用户名值 var username = $("#username").val(); //2. 定义正则,以单词字符开头，包含8和20 var reg_username = /^\w{8,20}$/ ...
html5+css3+javascript
05-26
HTML5 是一种用于创建网页结构的标记语言，用于控制网页的内容和布局。 CSS3 是一种用于网页样式设计的语言，可以实现网页的颜色、字体、边框、背景等设计效果。 JavaScript 是一种用于网页交互和动态效果的语言，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全职编程-叶湫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值