JS实现的简单表单验证功能示例


Posted in Javascript onOctober 13, 2017

本文实例讲述了JS实现的简单表单验证功能。分享给大家供大家参考,具体如下:

源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="myjs1.js"></script>
<link rel="stylesheet" type="text/css" href="myfile-2.css" rel="external nofollow" />
</head>
<body>
<form name="f1">
姓名:<input type="text" name="xm" />
<br/>
年龄:<input type="text" name="nl" />
爱好:<input type= "checkbox" name="ah" />爬山
<input type= "checkbox" name="ah" />游泳
<input type= "checkbox" name="ah" />网球
<input type= "checkbox" name="ah" />乒乓球
<br/>
密码:<input type="password" name="mm"/>
<br/>
重复密码:<input type="password" name="cfmm"/>
<br/>
备注:<textarea name="bz" rows="10" cols="20"></textarea>
<br/>
<input type="button" value="提交" onclick="checkit();"/>
</form>
</body>
</html>

myjs1.js文件代码:

// JavaScript Document
function checkit()
{ var flag = false;
 for(var i=0;i<document.forms[0].ah.length;i++)
{
if(document.forms[0].ah[i].checked)//checked 表示被选中
{
flag = true;
break;
}
}
if(!flag)//没有一个爱好被选中
{
alert("请至少选择一个爱好!");
return;//假如没有找到,又返回去,直到找到!
}
if(document.forms[0].mm.value.length<9)
{
alert("密码长度必须在8位数以上!");
document.forms[0].mm.focus();//让密码框获取焦点,焦点是 可以根据应用配合完成一些自动化操作,比如登录时输入了错误的用户名和密码,回转登录页后,可以让用户名输入框自动获得焦点,避免用户重新定位。
return;
}
if(document.forms[0].mm.value!=document.forms[0].cfmm.value)
{
alert("两次密码输入不一致,请重新输入密码!");
return;
}
if(document.forms[0].bz.value=="")
{
alert("请输入备注!");
}
}

注意:在js中声明变量用var,定义函数用function,

这个例子可以实现 爱好的验证(不能为空) ,密码是否一致,而且密码的长度要大于8,备注是否为空!

另外,css文件就交给读者自己美化了~

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js Html结构转字符串形式显示代码
Nov 15 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
vue-test-utils初使用详解
May 23 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
vue实现多级菜单效果
Oct 19 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 #Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 #Javascript
详解如何去除vue项目中的#——History模式
Oct 13 #Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 #Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 #Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 #Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 #Javascript
You might like
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
smarty简单应用实例
2015/11/03 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python中的字符串内部换行方法
2018/07/19 Python
pytorch 预训练层的使用方法
2019/08/20 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
男方父母婚礼答谢词
2014/01/25 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
青年文明号创建口号大全
2015/12/25 职场文书