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> ...
随机推荐
- Day37：正则表达式详解
正则表达式 1.1 概述 正则表达式可以用一些规定的字符来制定规则,并用来校验数据格式的合法性. 比如我们在网站上输入用户账号,要求我们输入的账号信息要符合账号的格式,而校验我们输入的账号格式是否正确 ...
- 制作 Python Docker 镜像的最佳实践
概述 ️Reference: 制作容器镜像的最佳实践 这篇文章是关于制作 Python Docker 容器镜像的最佳实践.(2022 年 12 月更新) 最佳实践的目的一方面是为了减小镜像体积,提升 ...
- 基于K-means聚类算法进行客户人群分析
摘要:在本案例中,我们使用人工智能技术的聚类算法去分析超市购物中心客户的一些基本数据,把客户分成不同的群体,供营销团队参考并相应地制定营销策略. 本文分享自华为云社区<基于K-means聚类算法 ...
- texlive安装与vscode环境配置
环境 系统:windows10 texlive下载 下载地址: 官网:http://tug.org/texlive/ 清华镜像源: https://mirrors.tuna.tsinghua.edu. ...
- [OpenCV实战]12 使用深度学习和OpenCV进行手部关键点检测
目录 1 背景 2 实现 3 结果和代码 4 参考 手部关键点检测是在手指上找到关节以及在给定图像中找到指尖的过程.它类似于在脸部(面部关键点检测)或身体(人体姿势估计)上找到关键点.但是手部检测不同 ...
- LeetCode-01 两数之和（Two Sum）
题目描述 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数, 你可以假设每个输入只对应一个答案,且同样的元素不能被重复利用. 示例 给定数组 nums = [2, 7, 11, 15], t ...
- BalticOI 2004 Sequence 题解
题目链接在这里~ 对于序列\(\{a\}\),把每一个\(a_i\)减去一个\(i\),得到\(\{a'\}\)序列\(\{b\}\)同理. 因为\(b_1<b_2<...<b_n\ ...
- 基于docker容器的MySQL主从设置及efcore读写分离
1.基于docker部署MySQL,设置主从 本操作基于已经拉取的镜像(docker pull mysql) 创建一主一从两个数据库容器 docker run -d -p 3307:3306 -e M ...
- [WPF]限制程序单例运行
代码 System.Threading.Mutex mutex; protected override void OnStartup(StartupEventArgs e) { bool ret; m ...
- 【Machine Teaching】An Overview of Machine Teaching
Machine Teaching 1 Introduction 1️⃣ 什么是 Machine Teaching? searching the optimal (usually minimal) te ...