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 写类方式之一
Jul 05 Javascript
javascript 函数使用说明
Apr 07 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
node.js中watch机制详解
2014/11/17 Javascript
jQuery功能函数详解
2015/02/01 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
Vue代码整洁之去重方法整理
2019/08/06 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python进行统计建模
2020/08/10 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
2014新年寄语
2014/01/20 职场文书
公开承诺书格式
2014/05/21 职场文书
详解MySQL的半同步
2021/04/22 MySQL
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python