当前位置: 首页 > 编程笔记 >

javascript表单验证大全

梅庆
2023-03-14
本文向大家介绍javascript表单验证大全,包括了javascript表单验证大全的使用技巧和注意事项,需要的朋友参考一下

被 JavaScript 验证的这些典型的表单数据有以下几种:

1.用户是否已填写表单中的必填项目?

2.用户输入的邮件地址是否合法?

3.用户是否已输入合法的日期?

4.用户是否在数据域 (numeric field) 中输入了文本?

下面是用户名和密码验证代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
function validateForm()
{
 var username = document.forms["myForm"]["username"].value;
 var password = document.forms["myForm"]["password"].value;
 alert(username+" "+password);
}
</script>
</head>
<body>
<form name="myForm" action="" onSubmit=" return validateForm()" method="post">
用户名:<input type="text" name="username"/><br/>
密码:<input type="password" name="password"/><br/>
 <input type="submit" value="提交"/>
</form>
</body>
</html>

必填(或必选)项目验证:

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

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

下面是连同 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" 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 验证

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

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

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 表单的完整代码:

<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>

以上代码是用户名、密码、必填、必选项和email以及连同表单的代码,希望对大家学习javascript表单验证有所帮助。

 类似资料:
  • 主要内容:使用 JavaScript 进行表单验证,必填字段验证,数据格式验证表单是 Web 应用(网站)的重要组成部分,通过表单可以收集用户提交的信息,例如姓名、邮箱、电话等。由于用户在填写这些信息时,有可能出现一些错误,例如输入手机号时漏掉了一位、在输入的内容前后输入空格、邮箱的格式不正确等。为了节省带宽同时避免这些问题对服务器造成不必要的压力,我们可以使用 JavaScript 在提交数据之前对数据进行检查,确认无误后再发送到服务器。 使用 JavaScript 来验

  • 本文向大家介绍JavaScript表单验证开发,包括了JavaScript表单验证开发的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js表单验证的具体代码,供大家参考,具体内容如下 在线demo:http://www.hui12.com/nbin/csdn/jsInput/demo.html  效果图: 主要说说add和get方法实现的思路 表单和规则对应,采用数组形式 【表单,规

  • 本文向大家介绍Javascript的表单验证长度,包括了Javascript的表单验证长度的使用技巧和注意事项,需要的朋友参考一下 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 该采用什么样的方式对用户作出提醒呢?你一定不想用alert()提示框 在输入域后加一个sqan标签 helpText是传入的span对象 用span标签来为用户作出提醒,不会

  • CodeIgniter 提供了一个全面的表单验证和数据预处理类以帮助缩减你所写的代码。 概述 表单验证指南 表单 成功页面 控制器 设置验证规则 使用一个数组设置验证规则 级联规则(Cascading Rules) 预处理数据(Prepping Data) 重新填充表单(Re-populating the Form) 回调 设置错误信息 更改错误定界符 翻译表单域名字 独立显示错误 将一系列验证规

  • 表单请求验证类 必须 使用 表单请求 - FormRequest 类 来处理控制器里的表单验证。 验证类的 authorize 绝不 使用 authorize() 方法来做用户授权,用户授权我们会单独使用 Policy 授权策略 来实现。 使用基类 所有 FormRequest 表验证类 必须 继承 app/Http/Requests/Request.php 基类。基类文件如下: <?php n

  • 本文向大家介绍JavaScript实现表单验证功能,包括了JavaScript实现表单验证功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现表单验证功能的具体代码,供大家参考,具体内容如下 以下是JavaScript的表单验证功能,可根据JS代码编写出你想要的HTML和CSS的代码。 关于正则表达式的使用,以及常用的正则表达式,笔者目前还在整理中,后期整理完