第十七篇 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:/ ...
随机推荐
- OSI的七层模型和TCP/IP的五层模型
OSI七层模型: 应用层->表示层->会话层->传输层->网络层->数据链路层->物理层 TCP/IP五层模型: 应用层->传输层->网络层->数 ...
- 使用 Itext 生成PDF字节数组(文件流不落地)
package com.ulic.gis.customerCenter.controller; import java.io.ByteArrayOutputStream; import java.io ...
- Nginx服务应用
虚拟主机 基于域名的虚拟主机 所谓基于域名的虚拟主机,意思就是通过不同的域名区分不同的虚拟主机,基于域名的虚拟主机是企业应用最广的虚拟主机类型,几乎所有对外提供服务的网站都是使用基于域名的虚拟主机 基 ...
- 升ttttttt
升ttttttt 升级日志小书匠 版本号 新功能 修改
- 2017年内容营销如何提高ROI转化率
根据2017 CMI报告显示,有近41%的营销人员今年会实施一系列内容营销战略.作为与用户间长期关系的桥梁, 从品牌化输出到信任感的培育,内容营销的影响力迅猛发展. 本次Focussend从互动集成内 ...
- Gradle DSL method not found: 'compile()'
问题描述: 今天在导入第三方库的时候报错:Gradle DSL method not found: 'compile()' 通过网上查询发现是自己导包路径错误:应该导入app下面的build.grad ...
- IPTV系统的VOD与TV业务性能测试
IPTV的未来发展正在成为业界的焦点话题.据市场研究公司MRG的统计,全球IPTV用户将由2004年的200万增加至2010年的2000万,预计全球IPTV市场2005-2010年的复合增长率为102 ...
- 网络分析:WireShark
安装 WireShark 官网 过滤器 类别 显示过滤器模式 捕获过滤器模式 逻辑表达式 and:&& or:|| 成组:() 过滤实例 仅监听某域名 http.host == &qu ...
- iOS源码学习总结框架
1.ARChromeActivity: 用于在Google Chrome中打开网址的UIActivity子类. 2.KINWebBrowser: 它使用iOS 8的 WKWebView API编写,同 ...
- Python 导入文件问题
1.同级目录下调用 若在程序 testone.py 中导入模块 testtwo.py , 则直接使用 [import testtwo 或 from testtwo import *] 2.调用子目录 ...