JS函数 checkForm

最新推荐文章于 2024-04-06 18:08:01 发布
最新推荐文章于 2024-04-06 18:08:01 发布
阅读量5.3k 收藏 10
点赞数 1
文章标签： JS基础 checkForm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SneakyRogue/article/details/80833850
版权

JavaScript函数--"checkForm"

        JS中一个较常见的函数"checkForm"。是用来检验表单信息的正确性。

        步骤如下：

        1：表单<form>添加提交事件

                <form action="#" method="get" name="regForm" οnsubmit="return checkForm()">

                </form>

               添加οnsubmit="return checkForm()"  其中红色函数名字随意。

        2：在表中<td>添加id字段

                <td>用户名</td>
<td>
<input type="text" name="user" id="user"/>
</td>

         3 : 编写check()函数，进行校验

                <scrtipt>

                  //1用户名不能为空

                   var uValue = document.getElementById("user").value;

                    alter("用户名不能为空");

                    return false;

                </scrtipt>

                其中绿色字段与<td>中必须相同。

            简单的案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script>
/*检查表单函数*/
function checkForm(){
//alert("aa");
//1 获取用户输入的数据
var uValue = document.getElementById("user").value;
if(uValue==""){
//2给出错误信息
alert("用户名不能为空!");
return false;
}

/*校验密码*/
var pValue = document.getElementById("password").value;
if(pValue==""){
alert("密码不能为空!");//
return false;
}

/*校验确认密码*/
var rpValue = document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码输入不一致!");
return false;
}

/*校验邮箱地址*/
var eValue = document.getElementById("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱地址不对!");
return  false;
}
}
</script>
</head>
<body>
<table>
<!-- 1 logo部分 -->
<tr>
<td>
<table>
<tr>
<td>
StevenLu SHOP
</td>
<td>
<a href="#">登入</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 2 导航部分 -->
<tr>
<td >
<a herf="#">
<font size="5" color="whirte">首页</font>
</a>
<a herf="#">
<font size="5" color="whirte">手机数码</font>
</a>
<a herf="#">
<font size="5" color="whirte">电脑办公</font>
</a>
<a herf="#">
<font size="5" color="whirte">家用电器</font>
</a>
</td>
</tr>
<!-- 3 注册列表 -->
<tr>
<form action="#" method="get" name="regForm" οnsubmit="return checkForm()">
<table>
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font>
</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" name="user" id="user"/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password"/>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="repassword" name="password" id="repassword"/>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text"/ name="email" id="email">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</tr>
</table>
<!-- 版权 -->
<td align="center">
<p>Copyright @2018.6.27 StevenLu</p>
</td>
</body>

</html>

第一次写，初学者，大佬勿喷。

SneakyRogue
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个简单的form表单验证
L_beaman的博客
09-19 387
在用html以及javascript写一个简单的表单验证时遇到了不少小问题。 因为javascript是脚本语言不用编译和检查，所以一旦代码上出现一些小问题可能很难发现。 我的代码如下 // An highlighted block <script> function check(form) { var n=form.username.value; if(n.length==0) { document.getElem
客户端表单通用验证CheckForm （转）
菜菜鸟_黑马的专栏
12-22 1420
/**/ /*  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ***                    客户端表单通用验证CheckForm(oForm)**   功能:通用验证所有的表单元素.**   使用:*   *　　*　　*　　*　　**   对text,password,hidden,fi
javascript 表单提交和验证的方法
Code for Coffee
05-31 5753
一、使用submit按钮，结合onsubmit事件实现 点击提交表单的时候，触发onsubmit的事件，这个事件会调用checkForm函数，该函数用于判断用户名是否为空 当我们点击提交表单时，将会触发onsubmit事件 onsubmit里是return checkForm，即调用checkForm函数 该函数用于判断用户名是否为空 对于onsubmit，如果return的是false...
js的check函数
最新发布
xiaohua0708day的博客
04-06 396
你可以根据需要扩展这个函数，添加更多的检查类型，比如检查数字是否在指定范围内、检查对象是否具有特定的属性等。记住，JavaScript是一种非常灵活的语言，你可以根据项目的具体需求来定义和实现自己的。是检查的类型（在这个例子中是'nonEmpty'，表示非空检查）。在JavaScript中，并没有一个内置的名为。函数的具体作用完全取决于你如何定义和实现它。以下是一个简单的示例，展示了如何定义一个。函数，用于执行各种验证和检查任务。或只包含空白字符），则函数返回。函数或其他任何辅助函数。
javaScript正则之form验证
JeelonXu.feng
08-21 841
对form表单进行简单的验证，错误之处，原来者指正，谢谢！   function check(Form) { var nameExpression = /[^\u4E00-\u9FA5]/; var PnumExpression = /^\d{17}[\d|X]|^\d{15}$/; var EmailExpression = /\w+([-+.']\w+)*@\w+([-.
通用表单验证函数
灰豆宝宝.net的专栏
08-23 4316
通用表单验证函数不管是动态网站,还是其它B/S结构的系统,都离不开表单表单做为客户端向服务器提交数据的载体担当相当重要的角色.这就引出了一个问题,提交的数据合法吗?摆在我们面前的问题就是验证这些数据保证所提交的数据是合法的.所以,我们写了一个大堆的验证函数.当我们开始新的一个项目的开发时,我们又得写一大堆的验证函数,然后再调试这一大堆的函数...本文将介绍一种方法来提高我的代码的可重用性,
学习DWR JavaScript函数整理
10-12
** 描　述:公用函数 ** 版　本:V1.0 ******************************************************************/ //全局变量 g_sourceSubstr = "`~" //要替换的字串 g_objecSubstr = "\"" //替换为的字串 /***********...
JavaScript验证函数大全
05-28
JavaScript验证函数是网页表单数据验证的重要组成部分，用于在用户提交数据前检查其输入的有效性和格式。以下是一些常见的JavaScript验证函数示例： 1. **验证Radio按钮是否被选择** 这个函数`checkform`遍历具有...
JavaScript字符串插入、删除、替换函数使用示例
10-27
JavaScript字符串是编程中常用的数据类型，它用于存储文本信息。在JavaScript中，处理字符串时，我们经常需要进行插入、删除和替换操作。...对于初学者来说，掌握这些函数的用法是提升JavaScript编程技能的重要步骤。
JS通用表单验证函数
12-27
【JS通用表单验证函数】是前端开发中用于确保用户输入数据有效性和合规性的一种常见技术。在网页表单提交前，使用JavaScript进行验证可以提高用户体验，减少无效数据提交到服务器，同时减轻后端处理压力。 这个特定...
js cookie实现记住密码功能
10-20
JavaScript（简称js）中的Cookie是一种在客户端存储少量数据的技术，常用于实现用户登录状态的保持，例如“记住密码”功能。下面我们将详细讨论如何使用js实现这一功能。 首先，我们需要了解HTML部分。在示例代码中...
CheckForm.js
11-04
CheckForm.js 常用表单javascript验证
formcheck（表单）
07-10
表单里面的提示如同一个气泡一样，效果特别的酷
js 通用表单提交2-submit的控制和ajax提交
leiting084的专栏
03-02 1423
通过上次的尝试我们发现表单中可以通过onsubmit来一定程度的控制form的submit动作。但是很快我们就发现这种情况下无法控制submit的后续动作，也就是页面跳转。那么怎么解决这个问题呢，我们进一步可以观察发现大多数时候我们是通过一个type=submit的按钮来实现表单提交的。也就是在form的onsubmit之前，我们实际上会有一个点击按钮的操作，那么我们就可以通过阻止按钮的默认动作来阻止form的submit。 然后由此引申我们可以创造一个另外的按钮用来提交form，举个小例子：
通用表单验证函数 - FormCheck JavaScript Function
aitiao7316的博客
11-30 698
以前在开发项目的时候，在没使用EXTJS之前，写了这个通用的表单验证函数。 在实际开发过程中，使用非常简单，确实大幅提高了开发效率 现在虽然用不到了，但扔了感觉可惜，留在这里当个纪念吧！ 通用表单验证函数使用说明 Author : netwild 最后更新日期：2009-07-02 一、函数功能 在编写WEB应用时，经常需要对各种表单进行输入验证，为...
文盲的 JavaScript 实战篇之一：表单验证
文盲的专栏
12-01 979
在我们的日常工作中，经常为各种页面撰写不同的表单，并且，需要对表单提交时，表单所输入的内容进行验证，比如，登录时，用户名不能为空、注册时，密码长度和复杂程度要符合安全标准等。form name="theForm" method="post" action="actionUrl">    li>用 户 名：input type="text" name="uid" />li>    li>登录密码：i
Check Form
lining213的专栏
01-06 513
<br />function check(event){<br />event?event:window.event;<br />target=event.target?event.target:event.srcElement;<br /> <br />var value=target.value;<br />if(value==""||value==null)<br />{<br />alert("value is null")<br />}<br />}<br /> <br />function se
js验证开始日期不能大于结束日期_JS判断结束时间不能小于开始时间并且间隔不能超过30天-script language=javascript function CheckForm() { var...
weixin_35426348的博客
12-24 1568
function CheckForm(){var jsrq=document.getElementById("sLtime").value; //结束var ksrq=document.getElementById("sRtime").value; //开始var now=""+new Date().getYear()+"-"+(new Date().getMonth()+1)+"-"+new D...
表单提交验证onsubmit=" return checkForm()"无效，（验证用户名和密码是否为空）
热门推荐
weixin_42713628的博客
08-24 1万+
今天我做了一个jsp&amp;servlet的小项目用于登录，在jsp界面，我用form中的onsubmit属性进行提交验证，其中使用jquery获取页面中的值，但是不行，没有验证到：经过我的不断调试，这种情况可以分为以下几种: 1.onsubmit的格式写错:正确格式--&gt;  &lt;form action="login" method="post" onsubmit="return c...
写一个function checkForm(obj) 函数
06-03
下面是一个简单的JavaScript函数checkForm(obj)，它接受一个表单对象作为参数，用于验证表单中的输入数据是否符合要求。 ```javascript function checkForm(obj) { // 获取表单元素 var name = obj.name.value; var email = obj.email.value; var phone = obj.phone.value; // 验证姓名是否为空 if (name == "") { alert("请填写姓名！"); return false; } // 验证邮箱格式是否正确 var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; if (email == "" || !emailReg.test(email)) { alert("请填写正确的邮箱地址！"); return false; } // 验证手机号码格式是否正确 var phoneReg = /^1[3|4|5|7|8]\d{9}$/; if (phone == "" || !phoneReg.test(phone)) { alert("请填写正确的手机号码！"); return false; } // 数据验证通过，提交表单 alert("数据验证通过，提交表单！"); return true; } ``` 该函数首先获取表单中的姓名、邮箱和手机号码等元素的值。然后分别验证这些元素是否满足要求，如果不满足，则弹出提示框提示用户填写正确的信息，并返回false，阻止表单提交。如果表单中的数据都符合要求，则弹出提示框提示用户数据验证通过，并返回true，允许表单提交。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值