JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

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

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

下面是连同 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" οnsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body></html>

<form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">
</form>这是一个form表单，action中是表单提交的请求，onsubmit是javascript脚本，提交后会先执行脚本然后再发送请求，return validate_form(this)，根据名字看应该是表单验证，method="post"是以post方式发送出去，发送方式有get和post之分，get就是发送的数据在地址栏能显示出来，但有长度和数据类型的限制，而post是放在请求体中发送，相比get方式，post方式更安全。

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

下面是连同 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"οnsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body></html>

参考资料：http://www.w3school.com.cn/js/js_form_validation.asp

转载于:https://www.cnblogs.com/lijingjun/archive/2012/08/14/2637710.html

JavaScript 表单验证相关推荐

javascript 表单验证大全（一）
javascript 表单验证大全(一) 5.身份证验证:包括15位和18位.function idNumber(s)//身份证验证 {regu1=/^[1-9]\d{7}((0\d)|(1[0-2] ...
10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
html表单验证js代码,JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输 ...
15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
15个非常实用的JavaScript表单验证库
来源:web前端开发 https://mp.weixin.qq.com/s/p9s9cmAt2MZeCgmD2LC5Sg 客户端验证在任何项目都是不可缺少的,很多时候我们需要在用户提交到服务器之前给予 ...
html自动验证邮件地址格式,JavaScript表单验证和邮箱格式验证的方法
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单 ...
HTML通过JavaScript表单验证
HTML通过JavaScript表单验证用户在填写表单的时候,我们程序对其进行验证是必须的,随便举个例子: <!DOCTYPE html> <html lang="en& ...
注册表单校验 js java,JavaScript表单验证完美代码
用原生JS写一个简单的表单验证首先,是html部分新用户注册基本信息用户名: 请输入至少3位的用户名密码: 请输入4到8位的密码确认密码: 请再输入一遍密码手机号码: 请输入11位手机号 ...
JavaScript表单验证及注册界面
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 表单数据经常需要使用 JavaScript 来验证其正确性下面是今天这个界面的 HTML CSS Jav ...

JavaScript 表单验证

E-mail 验证

JavaScript 表单验证相关推荐

最新文章

热门文章