js验证邮箱_js的if(!checkemail())是什么意思

作者：从前慢现在也慢 | 2024-08-05 14:47:21

踩

js的if(!checkemail())是什么意思

本文代码来自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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/932860?site