javascript表单验证使用示例(javascript验证邮箱)


Posted in Javascript onJanuary 07, 2014

被 JavaScript 验证的这些典型的表单数据有:

用户是否已填写表单中的必填项目?
用户输入的邮件地址是否合法?
用户是否已输入合法的日期?
用户是否在数据域 (numeric field) 中输入了文本?
必填(或必选)项目

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

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

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>
<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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 #Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 #Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 #Javascript
form表单action提交的js部分与html部分
Jan 07 #Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 #Javascript
javascript计时器事件使用详解
Jan 07 #Javascript
javascript创建和存储cookie示例
Jan 07 #Javascript
You might like
第六节 访问属性和方法 [6]
2006/10/09 PHP
php中常用编辑器推荐
2007/01/02 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
JS的反射问题
2010/04/07 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
vue.js的安装方法
2017/05/12 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
Python模拟三级菜单效果
2017/09/11 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
python跳出双层for循环的解决方法
2019/06/24 Python
tensorflow的计算图总结
2020/01/12 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
python中altair可视化库实例用法
2021/01/26 Python
机电专业个人自荐信格式模板
2013/09/23 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
人事聘任通知
2015/04/21 职场文书
民事申诉状范本
2015/05/20 职场文书
Python中22个万用公式的小结
2021/07/21 Python
vue递归实现树形组件
2022/07/15 Vue.js