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控制页面链接在新窗口打开具体方法
Aug 16 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 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 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
JavaScript手机振动API
2016/06/11 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
python的变量与赋值详细分析
2017/11/08 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Python中qutip用法示例详解
2020/10/02 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
武汉高蓝德国际.net机试
2016/06/24 面试题
创建文明学校实施方案
2014/03/11 职场文书
幼儿园开学寄语
2014/04/03 职场文书
网络技术专业求职信
2014/05/02 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
申请吧主发表的感言
2015/08/03 职场文书