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> ...
随机推荐
- Java多线程详解（通俗易懂）
一.线程简介 1. 什么是进程? 电脑中会有很多单独运行的程序,每个程序有一个独立的进程,而进程之间是相互独立存在的.例如图中的微信.酷狗音乐.电脑管家等等. 2. 什么是线程? 进程想要执行任务就需 ...
- Springboot启动时加载
@Component public class SpringBootInitialization1 implements ServletContextListener { @Override publ ...
- C#开发的资源文件程序（可国际化） - 开源研究系列文章
上次将小软件的线程池描述了,也将插件程序描述了,这次就将里面的资源文件相关的内容进行下记录,这里能够让程序做成国际化的形式(即多语言程序),主要就是通过这个资源文件的方式进行的处理.下面将对这个资源文 ...
- 浅谈RMQ问题
RMQ:question 有一个长度为 N N N的数组,数组中的数是无序的( 1 < = n < = 5 ∗ 1 0 5 1<=n<=5*10^5 1<=n<=5 ...
- 腾讯出品小程序自动化测试框架【Minium】系列（四）API详解（上）
写在前面 不知道是不是因为之前出过书的原因,在写教程之类的文章,会潜意识有自带目录和章节的感觉在里面,有点说不出的感觉吧. 上篇文章我们介绍了关于元素定位的使用方法,这篇文章将为大家分享关于Miniu ...
- Java 进阶P-2.5+P-2.6
包 Java 包(package) 为了更好地组织类,Java 提供了包机制,用于区别类名的命名空间. 包的作用 1.把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2.如同文件夹一 ...
- Java语言发展史-计算机进制转换
Java语言发展史 java的诞生 在1991年时候,James Gosling在Sun公司的工程师小组想要设计这样一种主要用于像电视盒这样的消费类电子产品的小型计算机语言. 这些电子产品有一个共同的 ...
- C#如何提高代码质量（一）
代码部分 1.正确操作字符串 尽量少装箱 String str1 = "str2"+9.ToString(); 避免分配额外的内存空间 StringBuilder 2.使用默认转型 ...
- 第三方模块:requests模块和openpyxl模块
1.第三方模块的下载应由 第三方模块:别人写的模块 一般情况下功能都特别强大 我们如果想使用第三方模块 第一次必须先下载后面才可以反复使用(等同于内置模块) 下载第三方模块的方式 1.pip工具 注意 ...
- HTTPS基础原理和配置-2
〇.概述 作为概述,以下是本文要讲的内容.HTTPS 是什么? 每个人都可能从浏览器上认出 HTTPS,并对它有好感.然后再讲一遍基础知识,再详细讲一下协议版本,密码套件(Cipher Suites) ...