javascript表单处理实例

最新推荐文章于 2022-12-10 21:54:35 发布
最新推荐文章于 2022-12-10 21:54:35 发布
阅读量1.3k 收藏
点赞数
分类专栏： 前台开发 文章标签： javascript input button function action 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maiken/article/details/4223738
版权

<html>

<head>
    <title>javascript表单处理</title>
     <script language="javascript">
        function test01(){
    if(document.getElementsByName('radiot01')[0].checked){
      alert("单选框1选中了！");
    }else if(document.getElementsByName('radiot01')[1].checked){
      alert("单选框2选中了！");
    }else if(document.getElementsByName('radiot01')[2].checked){
      alert("单选框3选中了！");
    }else{
      alert("没有选中单选框!");
    }
   }

   function test02(){
    if(document.getElementsByName('box01')[0].checked || document.getElementsByName('box01')[1].checked
    || document.getElementsByName('box01')[2].checked){
      if(document.getElementsByName('box01')[0].checked){
        alert("复选框1选中了！");
      }
      if(document.getElementsByName('box01')[1].checked){
        alert("复选框2选中了！");
      }
      if(document.getElementsByName('box01')[2].checked){
        alert("复选框3选中了！");
      }
    }else{
      alert("没有选中复选框！");
    }
   }

   function test03sub(){
    alert("submit按钮，执行此onClick后默认提交到表单,所以常设置成带返回值的形式");
    return false;
   }
        function test03subret(){
    alert("带返回值的submit，能否提交到表单看返回值的真假");
    return false;
   }
   function test03but(){
    alert("button按钮,执行此onClick后仍然在当前页");
   }

   function test04(){
    if(document.form04.textna.value == ""){
      alert("文本框text为空");
    }else{
      alert("文本框text有内容");
    }
    if(document.form04.tearna.value == ""){
      alert("文本域textarea为空");
    }else{
      alert("文本域textarea有内容");
    }
    if(document.form04.passna.value == ""){
      alert("密码框password为空");
    }else{
      alert("密码框password有内容");
    }
   }

   function test5(){
    if(document.form05.selname.value == "a"){
      alert("您选择了aaa");
    }
    if(document.form05.selname.value == "b"){
      alert("您选择了bbb");
    }
    if(document.form05.selname.value == "c"){
      alert("您选择了ccc");
    }
    if(document.form05.selname.value == "d"){
      alert("您选择了ddd");
    }
          if(document.form05.selname.value == "e"){
      alert("您选择了eee");
    }
   }
   </script>

</head>

<body>
    <center><hr>

   1.<font color="red">判断单选框是否选中</font>
      <form name="form01" action="formevent.html" method="get">
        <input type="radio" name="radiot01" />单选框1<br/>
   <input type="radio" name="radiot01" />单选框2<br/>
   <input type="radio" name="radiot01" />单选框3<br/>
   <input type="radio" name="radiottt" checked/>单选框默认选中<br/>
   <input type="button" name="button01" value="提交" onClick="test01();" />
   </form>
   <hr/><br/><br/>

   2.<font color="red">判断复选框是否选中</font>
   <form name="form02" action="formevent.html" method="get">
        <input type="checkbox" name="box01" />复选框1<br/>
   <input type="checkbox" name="box01" />复选框2<br/>
   <input type="checkbox" name="box01" />复选框3<br/>
   <input type="checkbox" name="boxxx" checked />复选框默认选中<br/>
   <input type="button" name="button02" value="提交" onClick="test02()"/>
   </form>
   <hr/><br/><br/>

      3.<font color="red">button和submit的区别</font>
   <form name="form03" action="formevent.html" method="get">
        <input type="submit" name="subname" value="submit" onClick="test03sub()" />
   <input type="submit" name="subretname" value="retsubmit" onClick="return test03subret()" />
   <input type="button" name="butname" value="button" onClick="test03but()" />
   </form>
      <hr/><br/><br/>

      4.<font color="red">判断文本框和文本域中是否为空</font>
   <form name="form04" action="formevent.html" method="get">
        文本框：<input type="text" name="textna" /><br/>
   文本域：<textarea name="tearna" cols="20" rows="3"></textarea><br/>
   密码框：<input type="password" name="passna" />
   <input type="button" name="butname" value="判断" onClick="test04()" />
   </form>
   <hr/><br/><br/>
   5.<font color="red">按钮和下拉框(事件)是否可编辑(使用、使用)</font>
   <form name="form06" action="formevent.html" method="get">
     <input type="button" value="按钮可用" />
     <input type="button" value="按钮不可用" disabled />
   <select name="selname" onChange="test05()">
          <option value="a">aaa</option>
    <option value="b" selected>bbb</option>
    <option value="c">ccc</option>
    <option value="d">ddd</option>
    <option value="e">eee</option>
   </select>
   </form>
   <hr/><br/><br/>
   6.<font color="red">js与正则表达式的详细用法请看下篇日志！</font>
   <hr/><br/><br/>
</center>
</body>
</html>

雪地漫步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript表单练习.zip
12-23
1． 掌握JavaScript脚本的调用和基本语法； 2． 掌握JavaScript常用内置对象的基本应用； 3． 掌握BOM和window消息对话框的使用； 4． 掌握HTML DOM动态网页设计技术。
javascript表单事件处理方法详解
01-19
本文实例为大家分享了javascript处理表单事件的常用方法，供大家参考，具体内容如下 1、访问表单对象的常用方法： ①：根据<form>元素的id属性； var myform=document.getElementById(“myformid”); //...
Javascript事件处理：利用DOM事件模型、鼠标、页面和表单相关事件，实现实验内容。
m0_61684063的博客
04-10 936
效果图： 实验要求： 1.用户名输入框不可为空且必须符合要求，否则出现红色提示。 2.密码不能为空且必须符合要求，否则出现红色提示。 3.确认密码不能为空且必须符合要求，否则出现红色提示。 4.创建性别和生日下拉列表框，并且生日下拉列表框必须有闰年和闰月的判断。 5.创建个人介绍文本框。 6.创建三级下拉列表框。 不符合要求的情况如下图： 用户名和密码为空时： 用户名、密码和确认密码不符合要求时： 代码部分： HTML代码： <style> ...
JavaScript常用表单事件用法总结与实例
任鹏鹏博客
09-29 1057
昨天下班后躺床上没什么事情，又去看了一点JavaScript视频，讲的是常用的表单事件，然后学习了。由于家里电脑坏掉了，没办法写代码，想着写一写才能更加深刻，今天写了一些 原创(原文链接)：JavaScript常用表单事件用法总结与实例 - 任鹏鹏的博客 本章所用到的语法：//表单事件 onfocus //获取焦点触发 onblur //失去焦点触发 onchange //切换时触
js练习8 --- 事件处理程序、表单脚本
我的博客
05-28 313
目录 1.第一题 某网页中，假设有一个按钮，请完成下列操作，需要考虑跨游览器的情况。 1.当把鼠标移到按钮上，按钮的颜色会发生变化，移走后消失; 2.假设按钮点击后发生动态的改变了网页的背景颜色，并且弹出游览器的版本信息; 3.假设按钮点击后默认操作是访问南林官网，现在需要将其行为阻止。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>&l.
JavaScript（五）—— JavaScript 表单及表单事件
Jsundoku的博客
03-26 3838
文章目录
JavaScript事件处理的例题
新白的博客
05-19 1168
知道的越多，所不知道的越多。如果带给你帮助，点赞支持一下。 JavaScript事件处理的例题1、表单验证2、验证数字输入3、利用document对象的bgColor属性改变背景色，添加鼠标悬停事件4.附加题（选做） 1、表单验证 要求：用户名不少于2位，并且用户名第一个字符需为字母! 密码长度必须在6~15之间。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>.
javascript验证form表单数据的案例详解
10-17
主要介绍了javascript验证form表单数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
javascript表单控件实例讲解
10-21
主要为大家详细介绍了javascript表单控件实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
《原生javascript表单验证实例教程》源码
04-02
本文件属于文章《原生javascript表单验证实例教程》的完整代码，在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接使用。
javascript实现自动填写表单实例简析
10-23
主要介绍了javascript实现自动填写表单的方法,以一个简单实例形式分析了JavaScript结合浏览器设置实现自动保存表单的相关技巧,需要的朋友可以参考下
最简单最实用最灵活最好的JS表单验证
01-30
最简单的JS表单验证，只要懂一点点JS的就能看明白，里面就三个，用户名，密码，确认密码，三个验证，看了这个，需要其它的验证完全可以自己加，可以说是看了这一个例子，一切表单验证都解决了
javascript多种经典例子
11-30
javascript多种经典例子
_JavaScript表单验证实例 js 前端 例子
02-06
_JavaScript表单验证实例 js 前端 例子_JavaScript表单验证实例 js 前端 例子
JavaScript小案例练习——动态表格+表单校验
春和的博客
02-18 665
学习完DOM+事件，做的小练习 1、动态表格 需求：如下图 分析： 1、删除 1、可以通过父节点删除子节点来进行删除这一行元素 2、给超链接绑定单击事件 3、获取tr一行的父元素 table 4、通过table删除子节点tr 2、添加 1、获取文本输入框的内容 2、拼串 将获取的值拼成tr的一行内容 3、使用innerHTML追加一行到表格中 代码： ...
【JavaScript 教程】事件——表单事件
web前端开发
09-15 898
作者 | 阮一峰1、表单事件的种类1.1、input 事件input事件当<input>、<select>、<textarea>的值发...
javascript常见习题（全）
weixin_47439712的博客
11-30 2453
1、什么是JavaScript？ JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，JavaScript也是面向对象编程语言。 类似的基本题目还包括：JavaScript都有哪些类型?JavaScript是谁发明的？… 2、列举Java和JavaScript之间的区别？ Java是一门十分完整、成熟的编程语言。相比之下，JavaScript是一个可以被引入HTML页面的编程语言。这两种语言并不完全相互依赖，而是针对不同的意图而设计的。 Java
JavaScript 学习笔记 - 6 表单处理
qq_24951479的博客
12-10 325
表单可以包含大多数常见的图形界面元素，包括输入字段、单选按钮、复选框、弹出菜单和输入列表。另外， HTML 表单可以包含密码字段，这种控件可以避免用户的输入被别人偷看。在填写表单之后，单击表单上的 Submit 按钮，会将表单的信息发送到 Web 服务器，在服务器上服务器端脚本会解释并操作这些数据。通常，将数据存储在数据库中供以后使用。在服务器端存储数据之前，需要确保用户输入的数据是“干净” 的，也就是说， 数据是准确的且具有正确的格式。 JavaScript是检查数据的好方法，这种技术称为表单验
利用JavaScript操作表单的小例子
左岸
08-21 1354
t检查用户注册信息是否正确，在以下情况不满足时报错并阻止提交表单：用户名必须是3-10位英文字母或数字；口令必须是6-20位；两次输入口令必须一致。<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()"> <p id="test-error" style="color:
表单验证javaScript代码实现案例
最新发布
04-21
我可以回答你的问题，以下是一个表单验证的 JavaScript 代码实现案例： HTML 代码： ``` <form id="myForm"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <button type="submit">Submit</button> </form> ``` JavaScript 代码： ``` const form = document.getElementById('myForm'); const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); form.addEventListener('submit', (event) => { event.preventDefault(); // 阻止默认表单提交行为 if (nameInput.value === '') { alert('Please enter your name'); } else if (emailInput.value === '') { alert('Please enter your email'); } else if (passwordInput.value === '') { alert('Please enter your password'); } else { alert('Form submitted successfully'); form.reset(); // 重置表单 } }); ``` 这个代码实现了一个简单的表单验证，当用户点击提交按钮时，如果表单未填写完成，则会弹出提示框，让用户填写完整。如果表单填写完成，则会弹出提交成功的提示框，并清空表单。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值