JavaScript表单验证实现代码


Posted in Javascript onMay 22, 2017

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有:
用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域 (numeric field) 中输入了文本?

必填(或必选)项目

下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题):

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
 {alert(alerttxt);return false}
else {return true}
}
}

下面是连同 HTML 表单的代码:

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
 {
 if (value==null||value=="")
  {alert(alerttxt);return false}
 else {return true}
 }
}

function validate_form(thisform)
{
with (thisform)
 {
 if (validate_required(email,"Email must be filled out!")==false)
  {email.focus();return false}
 }
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
 {alert(alerttxt);return false}
else {return true}
}
}

下面是连同 HTML 表单的完整代码:

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
 {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
 {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
原生JS实现N级菜单的代码
May 21 #Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 #Javascript
详解Angular2中Input和Output用法及示例
May 21 #Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 #Javascript
详解angularjs利用ui-route异步加载组件
May 21 #Javascript
如何在AngularJs中调用第三方插件库
May 21 #Javascript
You might like
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
php通过各种函数判断0和空
2020/07/04 PHP
stripos函数知识点实例分享
2019/02/11 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
jQuery链使用指南
2015/01/20 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Python中如何获取类属性的列表
2016/12/26 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
2014庆六一活动方案
2014/03/02 职场文书
《悯农》教学反思
2014/04/28 职场文书
爱心捐书活动总结
2014/07/05 职场文书
工程技术员岗位职责
2015/04/11 职场文书
行政撤诉申请书
2015/05/18 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript