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.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 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生成缩略图的代码
2011/01/12 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python条件和循环的使用方法
2013/11/01 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
Python引用计数操作示例
2018/08/23 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
网络信息安全承诺书
2014/03/26 职场文书
竞选学委演讲稿
2014/09/13 职场文书
2015员工年度考核评语
2015/03/25 职场文书
商标侵权律师函
2015/05/27 职场文书
2019年思想汇报
2019/06/20 职场文书
创业计划书之家政服务
2019/09/18 职场文书