本文代码来自W3school，部分有删改
<html>
<head>
<meta charset="utf-8" />
<script>
function checkEmail(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{ alert(alerttxt);
return false
}
else {return true}
}
}
function checkForm(thisform)
{
with (thisform)
{
if (checkEmail(email,"这不是一个正确的邮箱!")==false)
{ email.focus(); //focus() 方法用于给予该元素焦点。这样用户不必点击它，就能编辑显示的文本了。
return false
}
}
}
</script>
</head>
<body>
<form action="success.html"οnsubmit="return checkForm(this);" method="get">
邮箱: <input type="text" name="email" size="30">
<input type="submit" value="提交">
</form>
</body>
</html>该程序用于验证邮箱格式是否正确，当然标准不是很严谨，在一本书上看到用正则表达式更加精确，这个之后在研究一下。。
大体标准就是输入的数据必须包含‘@’符号和点号‘.’，同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号。
从头开始说吧：
js中声明了两个函数checkForm（）和checkEmail（），这次表单里只有一个邮箱需验证，还阔以添加账户密码等……首先是with（），它为一个语句或一组语句指定默认对象，with语句通常用来缩短特定情形下必须写的代码量，比如本例中的checkEmail（）函数，
field这个形参传参数的时候实参是form.email，所以可以省略field.value,也就是form.email.value，也就是说field是该段代码中用到的对象，这样便可以避免代码重复。
为了方便介绍这段代码，引入百度（部分删改）：
提交表单时，执行checkForm方法，并把表单对象作为参数传入方法中，在checkForm方法中，先判断checkEmail方法，由于该方法是公共的，所以可以直接找到，而作为参数的对象email在当前作用域中不存在，所以需要到thisform这个表单对象的作用域中查找name属性是email的表单元素，找到后，执行checkEmail方法，在checkEmail方法中需要查找value对象，而在checkEmail方法的作用域中找不到value属性，因此需要到field中查找（field这时就是name等于email表单元素），field中存在value属性，如果该属性的值为空，给出提示信息并返回false，否则返回true，如果checkEmail方法返回true，表单成功提交，如果返回false，email获得焦点并且表单不提交。
然后是value调用的两个方法，indexof（string）返回字符串string在父串中首次出现的位置，注意是从0开始，没有返回-1；lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索；然后可以验证邮箱的格式是否基本正确。
οnsubmit="return checkForm(this)"，这是一个验证表单的功能。当checkForm()这个函数返回值是true的时候，表单提交，反之则不提交。
onsubmit 事件会在表单中的确认按钮被点击时发生，这里return的作用就是对checkForm函数运行返回的结果，再向上返回，以便能在发现错误时即使停止后面继续将错误的数据拿去运行。注意，如果不加return的话，即οnsubmit="checkFor(this)"，这样也只能算是把false或者true字符串赋值给onSubmit，并不具有一定的功能，即不论表单中是否出现错误，都会继续运行下去。
最后便是method="get"，原文中是用的"post"，不过运行之后显示内部服务器错误，一查资料得知"post"属性需要服务器去处理post请求,而使用”get“属性的话，Hbulider里面有一个内置的服务器便可以处理这个。而对于get与post的区别大家可以去知乎上看一下，感觉讲的不错……
效果如下：输入正确格式
或者不是那么正规，但可以满足本次需求：
结果都可以注册成功：
格式不正确时会有提醒：
大概就是这样，success.html就是个显示页，可以随意写：
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<center>
<font color="black" size="7">恭喜你注册成功!</font>
</center>
</body>
</html>
扫一扫
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
