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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
各种常用的JS函数整理
Oct 25 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
Vue3为什么这么快
Sep 23 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 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 cookie 登录验证示例代码
2009/03/16 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
小程序实现单选多选功能
2018/11/04 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
使用python Django做网页
2013/11/04 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
职业生涯规划书的格式
2013/12/29 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python