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 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
jsPDF导出pdf示例
May 02 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
webpack打包js的方法
Mar 12 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
详解Vue中组件传值的多重实现方式
Aug 16 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新手谈谈我的学习心得
2007/02/25 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
PHP常用的三种设计模式
2017/02/17 PHP
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python requests.post带head和body的实例
2019/01/02 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
自我鉴定范文300字
2013/10/01 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
敬老院标语
2014/06/27 职场文书
部门活动策划方案
2014/08/16 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
深入浅析Django MTV模式
2021/09/04 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python