被 JavaScript 验证的这些典型的表单数据有：
- 用户是否已填写表单中的必填项目？
- 用户输入的邮件地址是否合法？
- 用户是否已输入合法的日期？
- 用户是否在数据域 (numeric field) 中输入了文本？
在看例子之前，可以先看看 with() 语法：
with 语句可以方便地用来引用某个特定对象中已有的属性，但是不能用来给对象添加属性。要给对象创建新的属性，必须明确地引用该对象。
1. 语法格式
with(object instance)
{
//代码块
}
有时候，我在一个程序代码中，多次需要使用某对象的属性或方法，照以前的写法，都是通过:对象.属性或者对象.方法这样的方式来分别获得该对象的属性和方法，着实有点麻烦，学习了with语句后，可以通过类似如下的方式来实现：
with(objInstance)
{
var str = 属性1;
.....
} 去除了多次写对象名的麻烦
必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
<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 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
<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>
相关推荐
另一个表单校验脚本，详细完整
校验表单的脚本，全面详实
公共JS校验,提供了常见的JS前台表单校验
简单的网页用户注册表单的校验，提供给大家学习，借鉴，完整代码已经打包，欢迎下载。截取一部分代码，如下： function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//...
JavaScript的form表单验证中的身份证校验
通用的js表单校验脚本
原生JS经典小项目-form表单校验
javascript将异步校验表单改写为同步表单.docx
Vue之ElementUI Form表单校验 表单校验是前端开发过程中最常用到的功能之一，根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明。 以下是form的demo el-form :model="dynamicValidateForm" ref=...
基于jquery的form表单验证类，工程项目为.net项目，主要是做了详细的调用例子，如果不使用.net，可以直接formvaildator-1.0.js或formvaildator-1.0.min.js，里面也有详细的调用说明，不过项目说明因为有例子会直观...
html网页用户注册表单验证校验JavaScript源码代码，完整代码已经打包，还迎下载，代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id...
javascript 表单验证禁止输入中文汉字
最近在学习JavaScript，因此想到使用js实现表单校验。下面通过本文给大家分享使用javascript实现表单校验功能的步骤，需要的的朋友参考下吧
vue 如何实现表单校验 一、安装并使用 首先，在你的vue项目中进行安装： npm install --save vue-input-check 安装完成以后引入并注册： import inputCheck from 'vue-input-check'; // 安装 Vue.use(input...
这个JavaScript的关键是onChange()事件，使用onKeyUp()事件完成是不行的，人家没有输入完毕，你就说人家不对，多不友好啊╮(╯▽╰)╭ 一、基本目标 一个表单认证页，如果输入的用户名超过10位则会立即在输入框旁边...
element多个表单校验的实现 在项目中，经常会遇到表单检验，单个表单检验可查看element的官网文档，里面有详细的介绍。在这里我分享在实际项目中遇到多个表单同时进行校验以及我的解决方法，欢迎大家留言，一起...
javascript实现仿京东注册表单，能够实现表单验证，正则匹配，表单验证追踪，随机验证码生成，密码强弱校验等功能。
教你一天玩转JavaScript(五)——使用JavaScript完成注册页面表单提示及校验
antd+vue实现动态验证循环属性表单的思路 希望实现查询表单的某些属性可以循环验证必填项： 需求： 1.名称，对比项，备注必填，默认为一行，可增加多行 2.根据名称，动态请求对比项列表，名称变化时，清空该行...
WEB前端校验插件，提供表单字段的配置式校验功能