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调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
javascript的几种写法总结
Sep 30 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
探讨如何把session存入数据库
2013/06/07 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
picChange 图片切换特效的函数代码
2010/05/06 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
元旦活动感言
2014/03/08 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
春晚观后感
2015/06/11 职场文书
高老头读书笔记
2015/06/30 职场文书
2016高考寄语集锦
2015/12/04 职场文书
2016七夕情人节感言
2015/12/09 职场文书