12346678

最新推荐文章于 2024-11-12 11:19:19 发布
最新推荐文章于 2024-11-12 11:19:19 发布
阅读量264 收藏
点赞数
文章标签： 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
关注
JavaScript简介&语法 ，表单的数据验证，图片轮播特效 ，广告弹窗效果 ，完善表单校验
ATT
03-27 489
历史回顾 表单：form ( action | method <get | post> | enctype ) 作用：收集并发送数据。 input type = ： text 文本框 | password 密码框 | number 数字框 | date 日期框 | radio 单选按钮 | checkbox 复选框 | file 文件上传框 | email 邮件输入框 | ...
12345677
m0_65562481的博客
09-18 366
<!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
模拟新用户注册页面（用到正则表达式）
06-09 604
用一个表格简单模拟新用户注册页面。 用正则表达式检验用户名，手机号和身份证号是否合法。 对自我介绍进行敏感词限制，如出现敏感词则进行提醒。 <!doctype html> <html> <head> <meta charset="utf-8"&g...
JS实现表单的验证
ASCEICY的博客
05-12 423
无标题文档 function check(){ var userName=document.getElementById("userName2").value;//得到输入的用户名 var email=document.getElementById("email").value;//得到输入的邮箱 var index1=email.indexOf("@");//判断@符号第一次出现
javascriptDom
qq_37149421的博客
11-13 815
1. DOM定义 全称：document object model（文档对象模型），是W3C组织推荐的处理可扩展标志语言的标准编程接口 •document：指的是可扩展的标记语言：HTML、XML； •object：DOM实际上是以基于对象方式对当前文档进行操作的； •model：在网页上，组织页面（或文档）的对象被组织在一个树形结构中，这个就是文档模型。 2.Document对象集
dts中配置节点寄存器地址有2个应该怎么配置
05-31
上面的例子中，设备在总线上的地址范围是从`0x12345678`到`0x12346678`，大小为`0x1000`字节。 2. `ranges`属性配置 `ranges`属性用来指定设备在父节点中的地址范围，可以用一个或多个`<child-address>`和`...
javascript应用3
myiteyeverywell的博客
09-10 202
    打开一个新页面：{   &lt;script type="text/javascript"&gt; function testMethod(){ window.alert("大家好"); window.confirm("删除后不能恢复,确定删除?"); window.alert(window.document.getElementById("email").value); ...
【浓缩精华版】JavaScript入门宝典（四）表单进阶&prototype
长夜漫漫，无心睡眠
01-04 491
一.表单元素操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function checkName(){ //获得input对象的值 var username=document.getElementById("user").value; //获得span对象 .
ajax学习篇3
thewebcode
06-14 145
对节点的综合应用。例子:对表格动态的添加记录。 &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...
javascript复习笔记（三）
tianpeiwen的专栏
02-28 402
事件的分类： 一般事件： 修改DOM的样式属性时，通过驼峰法 例如fontSize   backgroundColor   Onfocus Onblur          functionclearInput(){                      //获得输入框的值                      varusername = document.getElem
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 643
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
Vue中的常用指令
最新发布
m0_62388400的博客
11-12 923
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 77
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
vue2面试题5|[2024-11-08]
m0_49474690的博客
11-08 962
关于vue2API的面试题
Echarts 折线图
weixin_44443380的博客
11-08 274
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 632
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 410
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
React Native 全栈开发实战班 - 导航栈定制
做一个道者
11-11 382
React Navigation 允许开发者通过或options属性自定义导航栏的样式和行为。// App.jsreturn (},},
第三十七章 Vue之编程式导航及跳转传参
Calvin的博客
11-10 1554
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

纳什1

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

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

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

打赏作者

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

抵扣说明：

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

余额充值