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向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
jquery中radio checked问题
Mar 16 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
angular仿支付宝密码框输入效果
Mar 25 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
JavaScript执行机制详细介绍
Dec 06 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
php数组转成json格式的方法
2015/03/09 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
根据json字符串生成Html的一种方式
2013/01/09 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
Javascript实现单例模式
2016/01/24 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
详解Python的Django框架中的中间件
2015/07/24 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
softmax及python实现过程解析
2019/09/30 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
交通安全责任书范本
2014/07/24 职场文书
挂职学习心得体会
2014/09/09 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
材料员岗位职责范本
2015/04/11 职场文书
六年级作文之预言作文
2019/10/25 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis