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基础 之 表单的更多相关文章

  1. Javascript基础form表单

    <!DOCTYPE HTML> <html> <head> <script type="text/javascript" charset= ...

  2. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  3. javascript自动填写表单小技巧

    javascript自动填写表单小技巧 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作 ...

  4. 9. Javascript学习笔记——表单处理

    9. 表单处理 9.1 表单的基础知识 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement. //属性:action.me ...

  5. JavaScript 小实例 - 表单输入内容检测，对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

  6. 【ASP.NET 基础】表单和控件

    1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...

  7. 使用JavaScript 实现注册表单的校验

    说明:在点击提交时进行表单校验,具体要求如下: 1)用户名为3~16个字符,且不能包含”@”和”#”字符: 2)密码和校验密码必须一致,且长度在8个字符到16个字符: 3)兴趣爱好至少选择一项: 4) ...

  8. html基础之 表单提交方法

    最普通最常用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input ty ...

  9. 【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理

    最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...

随机推荐

  1. 专治编译器编辑器vscode中文乱码输出 win10 配置系统默认utf-8编码

    VS Code输出会出现乱码,很多人都遇到过.这是因为VS Code内部用的是utf-8编码,cmd/Powershell是gbk编码.直接编译,会把“你好”输出成“浣犲ソ”.如果把cmd的活动代码页 ...

  2. 在app中从下向上滑动，以找到不在默认第一页的元素

    1.在app中,如果第一面没有出现你要的元素,需要下滑拉动到你需要的元素的位置

  3. python小白——进阶之路——day2天-———容器类型数据（list，set ，tuple，dict，str）

    #容器类型数据 : list tuple # ###列表的特性:可获取,可修改,有序 # 声明一个空列表 listvar = [] print(listvar,type(listvar)) # (1) ...

  4. Oracle通过Navicat导入表数据与机构，数据无法直接查询，需要加双引号的问题

    使用navicat 导入表到ORACLE时,总是会遇到虽然表格完整导入到数据库,但是往往查不出来数据,网上提供的解决办法是把查询的列 加上 双引号,或者表名加上双引号,但这解决办法却减慢了编写sql ...

  5. 软工+C(6): 最近发展区／脚手架

    // 上一篇:工具和结构化 // 下一篇:野生程序员 教育心理学里面有提到"最近发展区"这个概念,这个概念是前苏联发展心理学家维果茨基(Vygotsky)提出的,英文名词是Zone ...

  6. 软件工程(GZSD2015) 第二次作业文档模板

    题目: (此处列出题目) 需求分析: 基本功能 基本功能点1 基本功能点2 ... 扩展功能(可选) 高级功能(可选) 设计 设计点1 设计点2 ... 代码实现 // code here 程序截图 ...

  7. Microsoft Visual Studio Tools for AI

    https://www.visualstudio.com/zh-hans/downloads/ai-tools-vs/ 开发.调试和部署深度学习和 AI 解决方案 Visual Studio Tool ...

  8. [OI]Noip 2018总结（普及）

    考砸了,还有原谅我代码十分有限的可读性. 一个人的真正伟大之处就在于他能够认识到自己的渺小.——保罗 从一年前初一九月到现在18年10月接触OI已经有一年了.几次模拟赛也自我感觉良好,都过了一等的线, ...

  9. Django_modelform组件

    modelForm 组件 概念 将数据库与form 组件结合用起来的中间插件 与 form 组件的区别 form组件的难处: form 可以实现 对数据的验证以及 form 的表单标签的生成 但是她做 ...

  10. ASP.NET知识点汇总

    一 ,html属性20181113常用的居中方法1 text-align2 float3 margin (margin-left matgin-right margin-bottom margin-t ...