12346678

最新推荐文章于 2024-05-31 10:26:40 发布
最新推荐文章于 2024-05-31 10:26:40 发布
阅读量223 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65562481/article/details/126918416
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<!-- TemplateBeginEditable name="doctitle" -->

<title>无标题文档</title>

<!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="head" -->

<!-- TemplateEndEditable -->

 

<script type="text/javascript">

 function checkForm() {

  var username = document.getElementById("username");

  var uTip = document.getElementById("uTip");

  var uRegex = /^[a-zA-Z_][a-zA-z0-9_]{5,15}$/;//正则表达式

  var password = document.getElementById("password");

  var pTip = document.getElementById("pTip");

  var pRegex = /^[a-zA-z0-9_]{6,16}$/;

  var repassword = document.getElementById("repassword");

  var repTip = document.getElementById("repTip");

  var sex = document.getElementsByName("sex");

  var sTip = document.getElementById("sTip");

  var hobby = document.getElementsByName("hobby");

  var hTip = document.getElementById("hTip");

  if (username.value.length == 0) {

   uTip.innerHTML = "<font color='red'size='2'>用户名不能为空!</font>";

   username.focus();

   return false;

  } else if (!uRegex.test(username.value)) {

   username.value = "";

   username.focus();

   uTip.innerHTML = "<font color='red'size='2'>有字母数字下划线组成的6-16位,0-9不能开头!</font>";

   return false;

  }

  if (!password.value) {

   pTip.innerHTML = "<font color='red'size='2'>密码不能为空!</font>";

   password.focus();

   return false;

  } else if (!pRegex.test(password.value)) {

   password.value = "";

   password.focus();

   pTip.innerHTML = "<font color='red'size='2'>请输入的6-16位字符!</font>";

   return false;

  }

  if (password.value != repassword.value) {

   password.value = "";

   repassword.value = "";

   password.focus();

   repTip.innerHTML = "<font color='red'size='2'>密码和确认密码不一致!</font>";

   return false;

  }

  if (sex[0].checked == false && sex[1].checked == false) {

   sTip.innerHTML = "<font color='red'size='2'>请选择性别!</font>";

   return false;

  }

  var j = 0;

  for (var i = 0; i < hobby.length; i++) {

   if (hobby[i].checked == true) {

    j++;

   }

  }

  if (j == 0) {

   hTip.innerHTML = "<font color='red'size='2'>请至少选择一个爱好!</font>";

   return false;

  }

 }

</script>

 

</head>

 

<body>

 

<fieldset>

  <legend>用户注册</legend>

  <form action="registerAction. jsp" method="get"

   οnsubmit="return checkForm();">

   <table border="1" bordercolor="blue" align="center" width="550px">

    <tr>

     <th colspan="2"><font face="仿宋" size="6" color="blue">用户注册</font></th>

    </tr>

    <tr>

     <td>用户名:</td>

     <td><input type="text" name="username" id="username" /> <span

      id="uTip"><font color="green" size="2">有字母数字下划线组成的6-16位,0-9不能开头!</font></span>

     </td>

    </tr>

    <tr>

     <td>密码:</td>

     <td><input type="password" name="password" id="password">

     <span id="pTip"><font color="green" size="2">6-16位字符组成</font></span></td>

    </tr>

    <tr>

     <td>确认密码:</td>

     <td><input type="password" name="repassword" id="repassword">

      <span id="repTip"><font color="green" size="2">6-16位字符组成</font></span></td>

    </tr>

    <tr>

     <td>性别:</td>

     <td><input type="radio" name="sex" value="男">男&nbsp;&nbsp;&nbsp;&nbsp;

      <input type="radio" name="sex" value="女">女 <span id="sTip">

      <font color="green" size="2">请选择性别!</font></span></td>

    </tr>

    <tr>

     <td>爱好:</td>

     <td><input type="checkbox" name="hobby" value="网游">网游&nbsp;&nbsp;

      <input type="checkbox" name="hobby" value="看书">看书&nbsp;&nbsp;

      <input type="checkbox" name="hobby" value="听音乐">听音乐&nbsp;&nbsp;

      <input type="checkbox" name="hobby" value="睡觉">睡觉 

      <span id="hTip"><font color="green" size="2">至少选择一个爱好!</font></span></td>

    </tr>

    <tr>

     <td>学历:</td>

     <td><select name="graduation" id="graduation">

       <option value="小学">小学</option>

       <option value="初中">初中</option>

       <option value="高中" selected="selected">高中</option>

       <option value="专科">专科</option>

       <option value="本科">本科</option>

       <option value="研究生">研究生</option>

     </select></td>

    </tr>

    <tr>

     <td>备注:</td>

     <td><textarea rows="5" cols="50">请写备注</textarea></td>

    </tr>

    <tr>

     <td colspan="2" align="center"><input type="submit" value="注册">&nbsp;&nbsp;&nbsp;&nbsp;

      <input type="reset" value="重置"></td>

    </tr>

   </table>

  </form>

 </fieldset>

 

</body>

</html>

纳什1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
JS实现表单的验证
ASCEICY的博客
05-12 402
无标题文档 function check(){ var userName=document.getElementById("userName2").value;//得到输入的用户名 var email=document.getElementById("email").value;//得到输入的邮箱 var index1=email.indexOf("@");//判断@符号第一次出现
JavaScript简介&语法 ，表单的数据验证，图片轮播特效 ，广告弹窗效果 ，完善表单校验
ATT
03-27 444
历史回顾 表单：form ( action | method <get | post> | enctype ) 作用：收集并发送数据。 input type = ： text 文本框 | password 密码框 | number 数字框 | date 日期框 | radio 单选按钮 | checkbox 复选框 | file 文件上传框 | email 邮件输入框 | ...
javascript复习笔记（三）
tianpeiwen的专栏
02-28 377
事件的分类： 一般事件： 修改DOM的样式属性时，通过驼峰法 例如fontSize   backgroundColor   Onfocus Onblur          functionclearInput(){                      //获得输入框的值                      varusername = document.getElem
模拟新用户注册页面（用到正则表达式）
06-09 575
用一个表格简单模拟新用户注册页面。 用正则表达式检验用户名，手机号和身份证号是否合法。 对自我介绍进行敏感词限制，如出现敏感词则进行提醒。 <!doctype html> <html> <head> <meta charset="utf-8"&g...
12345677
m0_65562481的博客
09-18 308
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb
【浓缩精华版】JavaScript入门宝典（四）表单进阶&prototype
长夜漫漫，无心睡眠
01-04 473
一.表单元素操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function checkName(){ //获得input对象的值 var username=document.getElementById("user").value; //获得span对象 .
javascriptDom
qq_37149421的博客
11-13 780
1. DOM定义 全称：document object model（文档对象模型），是W3C组织推荐的处理可扩展标志语言的标准编程接口 •document：指的是可扩展的标记语言：HTML、XML； •object：DOM实际上是以基于对象方式对当前文档进行操作的； •model：在网页上，组织页面（或文档）的对象被组织在一个树形结构中，这个就是文档模型。 2.Document对象集
javascript应用3
myiteyeverywell的博客
09-10 174
    打开一个新页面：{   &lt;script type="text/javascript"&gt; function testMethod(){ window.alert("大家好"); window.confirm("删除后不能恢复,确定删除?"); window.alert(window.document.getElementById("email").value); ...
ajax学习篇3
thewebcode
06-14 107
对节点的综合应用。例子:对表格动态的添加记录。 &lt;!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;metahttp-equiv="Content-Type...
【redis】Spring之RedisTemplate配置与使用
05-30 338
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1206
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1092
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 528
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 174
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
React-useState
weixin_46479909的博客
05-29 350
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（useState是一个React Hook（函数），它允许我们向组件添加一个。，从而控制影响组件的渲染结果。
KeyExpirationEventMessageListener监听器的使用
最新发布
qq_47910339的博客
05-31 458
KeyExpirationEventMessageListener监听器的使用
vue 笔记03
m0_47045804的博客
05-30 872
vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性。data里面定义的数据无法直接互相访问 因为加载到data的时候还没有产生当前的vue对象。return 返回的结果就是当前计算属性的值。回调函数的参数就是过滤原本的值return 返回过滤的新值。
[Nodejs]使用adm-zip和fs-extra压缩打包后的文件
ice_cream__的博客
05-29 228
现在学到了一种新方法，通过nodejs环境来实现文件、文件夹的复制粘贴，还有压缩解压缩等操作，那就是使用adm-zip、fs-extra这两个工具。
uniapp页面vue3下拉触底发送获取新数据请求实现分页功能
05-27 509
页面下拉触底获取新数据实现分页功能实现方式有两种，根据自己的业务需求来定，不同的方案适用场景不一样，有的是一整个页面下拉获取新数据，有的是部分盒子内容滚动到底部时候实现获取新数据，下面讨论一下两种方式的区别。
dts中配置节点寄存器地址有2个应该怎么配置
05-31
上面的例子中，设备在总线上的地址范围是从`0x12345678`到`0x12346678`，大小为`0x1000`字节。 2. `ranges`属性配置 `ranges`属性用来指定设备在父节点中的地址范围，可以用一个或多个`<child-address>`和`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

纳什1

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

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

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

打赏作者

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

抵扣说明：

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

余额充值