javascript基础 之 表单
1，js可以验证表单
实例1，js获取表单的内容
//html表单是这样的
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form> //js验证表单的程序
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
} //注意这个表单返回的是布尔值，而html表单里的onsubmit是“return false”或者“return true”
//其实道理很简单，但是格式需要记住：表单信息获取是document.forms['表单名']['表单下的元素名'].value 其实有点像python里的raw_input
实例2：验证文本框里是否输入了1-10之间的数字（和表单还是有些不同）
<body> <h1>JavaScript 验证输入</h1> <p>请输入 1 到 10 之间的数字：</p> <input id="numb"> <button type="button" onclick="myFunction()">提交</button> <p id="demo"></p> <script>
function myFunction() {
var x, text; // 获取 id="numb" 的值
x = document.getElementById("numb").value; // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = "输入正确";
}
document.getElementById("demo").innerHTML = text;
}
</script>
实例3，表单自动验证，内容是属于js的范围，但是书写形式不是直接敲代码，而是把HTML和js融合了
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="demo_form.php" method="post"> //老子是表单，提交的时候会把信息传给action指定的文件，方法按照post来
<input type="text" name="fname" required="required"> //意思：我是一个文本框，名字是fname（用于接收端定位信息），以定要有信息才能被提交。
<input type="submit" value="提交">
</form>
<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p>
</body>
</html>
2，约束验证（dom属性）
1，必填项目验证
</head>
<head>
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
alert("姓必须填写");
return false;
}
}
</script>
</head>
<body> <form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
//运行流程：点击提交->执行函数验证->文本框为空的话函数会提示并且返回false->onsubmit会return false，阻止提交
2，数据格式验证，比如电子邮箱验证
思想上和上面的差不多，函数内部可以用js的正则表达式匹配：教程：https://www.jb51.net/article/126866.htm
3,dom验证方法，如下
<body>
<p>输入数字并点击验证按钮:</p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) { //查看一下inpObj的属性是否合法
document.getElementById("demo").innerHTML = inpObj.validationMessage; //浏览器提示的错误信息
} else {
document.getElementById("demo").innerHTML = "输入正确";
}
}
</script>
</body>
checkValidity()：如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()：设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。
javascript基础 之 表单的更多相关文章
- Javascript基础form表单
<!DOCTYPE HTML> <html> <head> <script type="text/javascript" charset= ...
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- javascript自动填写表单小技巧
javascript自动填写表单小技巧 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作 ...
- 9. Javascript学习笔记——表单处理
9. 表单处理 9.1 表单的基础知识 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement. //属性:action.me ...
- JavaScript 小实例 - 表单输入内容检测，对页面的增删改
JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...
- 【ASP.NET 基础】表单和控件
1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...
- 使用JavaScript 实现注册表单的校验
说明:在点击提交时进行表单校验,具体要求如下: 1)用户名为3~16个字符,且不能包含”@”和”#”字符: 2)密码和校验密码必须一致,且长度在8个字符到16个字符: 3)兴趣爱好至少选择一项: 4) ...
- html基础之 表单提交方法
最普通最常用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input ty ...
- 【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理
最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...
随机推荐
- 监控elssticSearch健康状态
[4ajr@elk1 scripts]$ curl 172.30.210.175:9200/_cat/health [4ajr@elk1 scripts]$ cat check_es_healthy. ...
- python小白——进阶之路——day4天-———流程控制while if循环
# ### 代码块: 以冒号作为开始,用缩进来划分作用域,这个整体叫做代码块 if 5 == 5: print(1) print(2) # 注意点: 要么全部使用4个空格,要么全部使用1个缩进 ,这样 ...
- 可视化工具Grafana：简介及安装
随着业务的越发复杂,对软件系统的要求越来越高,这意味着我们需要随时掌控系统的运行情况.因此,对系统的实时监控以及可视化展示,就成了基础架构的必须能力. 这篇博客,介绍下开源的可视化套件grafana的 ...
- 错误代码1045 Access denied for user 'root'@'localhost' (using password:YES)
在mysql中新建连接,ip地址是127.0.0.1,账号是root,密码是123456,但是测试连接的时候报错, 错误代码1045 Access denied for user 'root'@'lo ...
- Flask —— 信号（5）
Flask框架中的信号基于blinker,其主要就是让开发者可是在flask请求过程中定制一些用户行为. pip3 install blinker 1. 内置信号 request_started = ...
- Linux之文本编辑器Vim
一.什么是vim vi是一种模式编辑器.vi 是Unix世界里极为普遍的全屏幕文本编辑器,几乎可以说任何一台Unix机器都会提供这套软体,其他的文本编辑器则不一定会存在,但是目前我们使用比较多的是 v ...
- Docker 删除容器日志
在使用docker的时候,我们经常通过 docker logs -f containername或者id 但是有时候日志很多.很麻烦.所以需要清理一下对应container的日志. 默认情况下,dao ...
- webpack学习记录-认识loader（二）
Loader 就像是一个翻译员,能把源文件经过转化后输出新的结果,并且一个文件还可以链式的经过多个翻译员翻译. loader参考文章:https://webpack.docschina.org/loa ...
- CF932 E. Team Work 结题报告
CF932 E. Team Work 题意 求 \[ \sum_{i=0}^n\binom{n}{i}i^k \] 其中\(n\le 10^9,k\le 5000\),对\(mod=998244353 ...
- [SCOI2015]小凸想跑步
题目描述 小凸晚上喜欢到操场跑步,今天他跑完两圈之后,他玩起了这样一个游戏. 操场是个凸 n 边形, nn 个顶点按照逆时针从 0 ∼n−1 编号.现在小凸随机站在操场中的某个位置,标记为p点.将 p ...