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> ...
随机推荐
- hashlib加密模块 subprocess模块 logging日志模块
目录 hashlib加密模块 简介 hashlib使用流程 hashilb加密模块使用说明 明文绑定密文 密文长度不变 多次传入 密文不可解密原因 加盐处理(salt) 普通加盐 动态加盐 加密实际运 ...
- java中的动态绑定机制
本文主要讲述java中的动态绑定机制. 老韩ppt关于动态绑定机制: 示例代码如下: public class DynamicBinding { public static void main(Str ...
- python 学生管理系统 文件版 增删改查
# 在程序开始之前完成数据的读取 # 存在着循环 # 循环的内容 # 将操作内容分解为函数 def sel_student(students_list): """ 查看所 ...
- Django(2) - Django模板
1.Django模板介绍 基础概念 模板是具有一定的格式或骨架,可以动态的生成HTML 模板引擎决定以何种方式组织代码 一个项目可以有一个或者是多个模板引擎,Django里面主要两个模板引擎:DTL. ...
- 2022弱口令实验室招新赛CTF赛道WriteUp
Misc 签到 下载附件,得到一张二维码. 扫码,然后根据提示"linux"操作系统,直接cat /flag,得到flag. EasyMisc 下载得到EasyMisc附件,压缩包 ...
- [OpenCV实战]10 使用Hu矩进行形状匹配
目录 1 什么是图像矩? 2 如何计算图像矩 2.1 质心获取 2.2 中心矩 2.3 Hu矩 3 基于Hu矩实现形状匹配 3.1 Hu矩的计算 3.2 基于matchShapes函数计算两个图形之间 ...
- python之路34 MySQL 2 配置文件 字段类型
字符编码与配置文件 1.\s查看MySQL相关信息 当前用户.版本.编码.端口号 MySQL5.6及之前的版本编码需要人为统一 之后的版本已经全部默认统一 如果想要永久修改编码配置 需要操作配置文件 ...
- [WPF]C#调用C++代码（通过C++/CLI）
用途 通过使用C++ + Opencv 编写算法,然后用WPF(C#)编写程序界面,实现交互 可以参考MSDN文档:https://docs.microsoft.com/en-us/cpp/windo ...
- CF构造题1600-1800（1）
D. Same Count One(Polynomial Round 2022 (Div. 1 + Div. 2, Rated, Prizes!)) 题意 给定 \(n\) 个长度为 \(m\) 的 ...
- 超级容易理解的函数节流(throttle)
今天搞了一个简单的写法 话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...