第十七篇 JS验证form表单
JS验证form表单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS验证form表单，使用正则表达式</title>
</head>
<body>
<h3>js验证表单</h3> <form action="#" method="post">
<p>
用户名： <input type="text"/>
</p>
<p>
<!--letter-spacing 给它添加间距，这里用的是em单位 它比px大-->
<span style="letter-spacing: 1em;">密</span>码： <input type="password"/>
</p>
<p>
<input type="submit" value="提交"/>
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS验证form表单，使用正则表达式</title>
</head>
<body>
<h3>js验证表单</h3>
<!-- form表单里加了一个onsubmit事件，当点击提交按钮就触发这个事件 -->
<form action="#" method="post" onsubmit="return myform()">
<p>
用户名： <input type="text"/>
<!--格式错误，用span做提示-->
<span style="color:red;font-size: 12px;display: none;" class="tishi">
必须两位字符及以上
</span>
</p>
<p>
<!--letter-spacing 给它添加间距，这里用的是em单位 它比px大-->
<span style="letter-spacing: 1em;">密</span>码： <input type="password"/>
<!--格式错误，用span做提示-->
<span style="color:red;font-size: 12px;display: none;" class="tishi">
密码只能由6-30位数字和字母组成
</span>
</p>
<p>
<input type="submit" value="提交"/>
</p>
</form>
<script>
//forms 是找到当前页面所有form表单，而数组下标[0] 是找到第一个form
var form = document.forms[0];
//表单获取到了，我们先用正则来写格式规范
//var是关键字，用来声明变量的
var yonghu = /^[A-Za-z0-9_\-\-\u4e00-\u9fa5]{2,}$/;
//yonghu，它的正则表达意思是，必须是数字或者大小写26位字母，或者中文，后面一串就是支持汉字的意思，花括号里的2,是指必须两位及以上字符
var mima = /^[0-9a-zA-Z]{6,30}$/;
//密码，这里面很简单，只能是数字或者26位大小写字母，花括号里的意思是字符长度为最小6位，最大30位
//我们用 elements来获取form表单下的input select textarea这一类，属于form表单的元素
function yanzheng(){
//先隐藏它，这样它显示了之后，输入正确再次点击，即可隐藏
document.getElementsByClassName('tishi')[0].style.display="none";
document.getElementsByClassName('tishi')[1].style.display="none";
//正则判断form下第一个input，如果错误返回一个假，并给出提示，
if(!yonghu.test(form.elements[0].value)){
//出现提示！
document.getElementsByClassName('tishi')[0].style.display="inline";
return false;
}else if(!mima.test(form.elements[1].value)){
//出现提示！
document.getElementsByClassName('tishi')[1].style.display="inline";
return false;
}
//如果上面的判断为假，则返回false，上面的判断都正确，就直接跳过if里的代码，执行下面的 true
return true;
}
function myform(){
//判断 yanzheng函数，它如果返回过来的是true，我们就判断，是真就返回真
if(yanzheng())
return true; //如果yanzheng函数返回的是false则不会执行上面的 true，就会执行线面的false，表单就无法提交
return false;
}
</script>
</body>
</html>
第十七篇 JS验证form表单的更多相关文章
- js验证form表单示例
js验证form表单示例 检测测试了js表单验证,无jQuery(简单的功能有时无需jQuery版本) js代码如下: <script type="text/javascript& ...
- js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- JS 提交form表单
源码实例一:javascript 页面加裁时自动提交表单Form表单:<form method="post" id="myform" action=&qu ...
- js重置form表单
CreateTime--2017年7月19日10:37:11Author:Marydon js重置form表单 需要使用的方法:reset() 示例: HTML部分 <form id=&qu ...
- js阻止form表单重复提交
防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...
- 使用js提交form表单的两种方法
提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...
- jQuery.Validate.js验证大表单的优化
最近在项目中有遇到一个Form表单中有200多个标签.在提交表单时网页会出现等待时间很长,甚至会出现网页奔溃的情况. 主要的原因是因为在使用jQuery.Validate.js进行Form验证的时候会 ...
- Js 提交 form 表单
本文主要讲如何使用Js提交表单,在使用ajax进行异步验证的多数情况下,需要使用Js提交表单,以下简单说几种提交表单的方式: 1.document.getElementById("formI ...
- 参数传递的四种形式----- URL，超链接，js，form表单
什么时候用GET, 查,删, 什么时候用POST,增,改 (特列:登陆用Post,因为不能让用户名和密码显示在URL上) 4种get传参方式 <html xmlns="http:/ ...
随机推荐
- jdk git maven Jenkins的配置
前言 搭建Jenkins的笔记. JDK 1. jdk 下载地址 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-down ...
- 通过ID获取元素
网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人.那么在网页中,我们通过id先找到标签,然后进行操作. 语法: document ...
- RzPageControl(pagecontrol)实现多标签的动态添加,切换,关闭
https://blog.csdn.net/pdw2009/article/details/76157651 使用RzPageControl来实现多标签页使用菜单来打开标签页,通过标签页的captio ...
- OpenCV学习笔记(14)——轮廓的性质
提取一些经常使用的对象特征 1.长宽比 边界矩形的宽高比 x,y,w,h = cv2.boundingRect(cnt) a ...
- RN在Mac环境下开发环境搭建
1.推荐使用Homebrew来安装 Node 和 Watchman.在命令行中执行下列命令安装: brew install node brew install watchman 如果你已经安装了 No ...
- c# Selenium ExpectedConditions 不存在
Selenium中的显示等待指的是,等待某一元素出现或者等待页面加载完成后,才执行下一步.需要用到WebDriverWait类. 例如: , , )); var element = wait.Unti ...
- Delphi动态创建菜单
在程序运行中动态创建菜单,主要使用TMeunItem类,所有菜单的条目都是TMenuItem的一个实例. 打开Delphi7集成开发环境,在默认新建工程里,放置一个Button1按钮和MainMenu ...
- Anaconda环境配置常用命令
1. 新建一个环境: conda create -n ForPytorch python=3.6 该行命令新建了一个叫做ForPytorch的环境,该环境使用的python是3.6版本.新建一个环境的 ...
- 【POJ - 3984】迷宫问题（dfs）
-->迷宫问题 Descriptions: 定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0 ...
- 云计算共享组件--消息队列rabbitmq（3）
一.MQ 全称为 Message Queue, 消息队列( MQ ) 是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们. 消息传 ...