JavaScript表单form
form表单实例
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript form表单</title>
6 </head>
7 <script>
8 function validataForm(form){
9 // var x=document.forms["myForm"]["fname"].value
10 var y=form.fname.value
11 console.log(y)
12 if(x==null || x==""){
13 alert("请输入您的姓名")
14 return false
15 }
16 }
17 </script>
18 <body>
19 <form action="JavaScript 条件运算符.html" name="myForm" onsubmit="return validataForm(this)" method="post">
20 姓名：<input type="text" name="fname" required="required">
21 <input type="submit" value="提交">
22 </form>
23 </body>
24 </html>
JavaScript验证输入的数字
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript form表单验证输入</title>
6 </head>
7 <body>
8 <h1>javascript 验证输入</h1>
9 <p>请输入1~10之间的数字。</p>
10 <input type="text" id="num">
11 <button type="button" onclick="myFunction()">提交</button>
12 <p id="demo"></p>
13 <script>
14 function myFunction(){
15 var x, text
16 // 获取输入的num值并赋值给x
17 x = document.getElementById("num").value;
18 // 如果 x不是数字或x<1或x>10 返回输入错误
19 if(isNaN(x) || x<1 || x>10){
20 text = "输入错误"
21 }
22 // 否则返回输入正确
23 else{
24 text = "输入正确"
25 }
26 document.getElementById("demo").innerHTML=text;
27 }
28 </script>
29 </body>
30 </html>
html自动表单验证
html表单也可以通过浏览器自动验证。
如果表单中某字段为空，可以通过required属性阻止表单提交
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>javascript form表单</title>
6 </head>
7 <script>
8 function validataForm(form){
9 // var x=document.forms["myForm"]["fname"].value
10 var y=form.fname.value
11 console.log(y)
12 if(x==null || x==""){
13 alert("请输入您的姓名")
14 return false
15 }
16 }
17 </script>
18 <body>
19 <form action="JavaScript 条件运算符.html" name="myForm" onsubmit="return validataForm(this)" method="post">
20 //required 属性控制该字段是否为空
21 姓名：<input type="text" name="fname" required="required">
22 <input type="submit" value="提交">
23 </form>
24 </body>
25 </html>
邮箱验证
邮箱需求：
输入一个邮箱地址，并返回邮箱地址是否合法：
1、邮箱地址必须包含@符号和点号.，且邮箱开头不能是@，且@之后需要一个点好；
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" content="text/html">
5 <title>javascript form表单验证之邮箱验证</title>
6 </head>
7 <script>
8 function validataForm(){
9 // 先获取表单中的email值并赋值给x
10 var x = document.forms["myForm"]["emial"].value;
11 console.log(x)
12 // x是否包含@字符
13 console.log(x.indexOf("@"));
14 var atops = x.indexOf("@");
15 // x是否包含.
16 var dotops = x.indexOf(".");
17 // 如果@<1或者.<@+2或者@+2大于等于邮箱长度返回false，且弹出不是一个有效邮箱
18 if(atops<1||dotops<atops+2||atops+2>=x.length){
19 alert("不是一个有效的邮箱")
20 return false;
21 }
22 else{
23 alert("got it...")
24 return true;
25 }
26
27 }
28 </script>
29 <body>
30 <form action="" name="myForm" method="post" onsubmit="validataForm()">
31 Email: <input type="text" name="emial">
32 <input type="submit" value="提交">
33 </form>
34 </body>
35
36 </html>
JavaScript表单form的更多相关文章
- JavaScript表单
JavaScript表单 这篇文章的主要目的是介绍表单相关的知识,如表单基础知识.文本框脚本相关用法.选择框脚本相关用法以及等知识.虽然在现代web开发中,很少会使用form默认行为提交表单数据,而是 ...
- HTML ------ 关于表单 Form
Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源. 掌握表单(Form)有以下几个要点: 重要form属性 form常用控件 form提交方式 § 重 ...
- 表单 - Form - EasyUI提供的表单异步提交
方案一 被提交的表单 <form id="loginForm" method="post"> <table align="cente ...
- 推荐几款很棒的 JavaScript 表单美化和验证插件
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
- JavaScript表单处理（上）
为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 发文不易,转载请亲注明出处,谢谢! 一．表单介绍 在HTML中,表单是由<form& ...
- JavaScript表单提交四种方式
总结JavaScript表单提交四种方式 <!DOCTYPE html> <html> <head> <title>JavaScript表单提交四种方式 ...
- 前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- 第一百二十二节，JavaScript表单处理
JavaScript表单处理 学习要点: 1.表单介绍 2.文本框脚本 3.选择框脚本 为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 一． ...
- JavaScript表单验证和正则表达式
JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...
- HTML（七）HTML 表单(form元素介绍，input元素的常用type类型，input元素的常用属性)
前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...
随机推荐
- 边框 display属性 盒子模型 浮动 溢出 定位 z-index
目录 边框 隐藏属性 钓鱼网站 display visibility 盒子模型 调整方式 浮动 溢出 圆形头像的制作 定位 z-index属性 边框 /*border-left-width: 5px; ...
- ORM常用字段与参数(自定义字段)
目录 一:orm中常用字段及参数 1.说明 2.自定义字段使用 3.ORM字段参数 一:orm中常用字段及参数 1.说明 id字段是自动添加的,如果你想要指定自定义主键,只需在其中一个字段中指定pri ...
- 使用WPF或AspNetCore创建简易版ChatGPT客户端，让ChatGPT成为你的私人助理
前言:前一天写的一个ChatGPT服务端,貌似大家用起来还不是那么方便,所以我顺便用WPF和AspNetCore的webapi程序做个客户端吧,通过客户端来快速访问chatgpt模型生成对话. 1 ...
- python实验报告（第12章）
实验12:GUI界面编程 一.实验目的和要求 1.学会应用常用控件: 2.学会使用BoxSizer布局: 3.学会事件处理. 二.实验环境 软件版本:Python 3.10 64_bit 三.实验过程 ...
- Jmeter——循环控制器中实现Counter计数器的次数重置
近期在使用Jmeter编写个辅助测试的脚本,用到了多个Loop Controller和Counter. 当时想的思路就是三个可变的数量值,使用循环实现:但第三个可变值的数量次数,是基于第二次循环中得到 ...
- [python] 基于NetworkX实现网络图的绘制
NETWORK CHART(网络图) 代码下载地址 网络图 (或图表或图形)显示了一组实体之间的互连.每个实体由一个或多个节点表示.节点之间的连接通过链接(或边)表示.网络的理论与实现是一个广阔的研究 ...
- 完整数据分析流程：Python中的Pandas如何解决业务问题
开篇 作为万金油式的胶水语言,Python几乎无所不能,在数据科学领域的作用更是不可取代.数据分析硬实力中,Python是一个非常值得投入学习的工具. 这其中,数据分析师用得最多的模块非Pandas莫 ...
- ArcGIS工具 - 按要素裁切数据库
在GIS处理数据中,经常需要分图,将整个任务区划分成若干块,由不同的人协作完成.为了节省分图裁切时间,减少人员操作失误,为源GIS专门制作了按要素裁切数据库工具,以提高数据生产效率. 需求描述 裁切单 ...
- LVGL 中图片使用问题
此笔记主要是记录在 LVGL 中使用图片的几种方式,以及使用过程中遇到的问题.最近在 ARM linux 中使用 LVGL 时,发现加载图片变得很卡,一开始还好,当连续加载的图片变多后,特别是动画的过 ...
- dfs 返回值用bool相对void会快一点
力扣 剑指 Offer 12. 矩阵中的路径 超时代码 dfs返回值是void,用类内的全局变量flag表示找到或没找到. class Solution { public: bool flag; in ...