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 相关文章推荐
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
js加减乘除精确运算方法实例代码
Jan 17 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
两个php日期控制类实例
2014/12/09 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
js正则相关知识点专题
2018/05/10 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
Python 错误和异常小结
2013/10/09 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Python中的asyncio代码详解
2019/06/10 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
链表面试题-一个链表的结点结构
2015/05/04 面试题
元旦活动感言
2014/03/08 职场文书
主题教育活动总结
2014/05/05 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python