第十七篇 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:/ ...
随机推荐
- 转贴 使用正则表达式解析一般sql语句（C++）
https://blog.csdn.net/dreamgchuan/article/details/47715743 --END--2019年9月5日11点58分
- AndroidManifest.xml中的<uses-feature>以及和<uses-permission>之间的联系
概述:<uses-feature>用来声明应用中需要用的硬件和软件的功能. 硬件特性:表明您的应用需要用的硬件功能. 功能类型 特征描述 描述 音频 android.hardware.au ...
- localStorage基本了解及使用
以下内容来自: https://www.cnblogs.com/st-leslie/p/5617130.html 感谢大佬的分享 一.什么是localStorage.sessionStorage 在 ...
- Java：面向对象（继承，方法的重写（overide），super，object类及object类中方法的重写，父子类代码块执行顺序）
继承: 1.继承是对某一匹类的抽象,从而实现对现实世界更好的建模. 2.提高代码的复用性. 3.extends(扩展),子类是父类的扩展. 4.子类继承父类可以得到父类的全部属性和方法.(除了父类的构 ...
- OnCustomDraw
ON_NOTIFY_REFLECT(NM_CUSTOMDRAW, &CMyListCtrl::OnNMCustomdraw) ON_NOTIFY : Comes from a child co ...
- OpenCV阈值化处理
图像的阈值化就是利用图像像素点分布规律,设定阈值进行像素点分割,进而得到图像的二值图像.图像阈值化操作有多种方法,常用方法有经典的OTSU.固定阈值.自适应阈值.双阈值及半阈值化操作.这里对各种阈值化 ...
- 常见IE6兼容问题总结
1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当 ...
- windows中service.msc与regedit
Services.msc是Windows2000/XP/2003/Vista/7/2008/8/8.1/10系统中用来启动.终止并设置 Windows 服务的管理策略. 作用:控制系统服务. 性质:系 ...
- Linux C\C++基础——数组形参的使用
1.数组形参 ]) void fun(int a[]) void fun(int *a) ],int n) void fun(char*p[],int n) void fun(char**p,int ...
- ASP.NET Session详解（转）
ASP.NET Session详解 本文章来自:http://blog.163.com/adam601@126/blog/static/22506317200932824210996/ 当用户在 We ...