javascript实现表单验证

最新推荐文章于 2022-08-29 17:56:19 发布
最新推荐文章于 2022-08-29 17:56:19 发布
阅读量587 收藏
点赞数 1
分类专栏： Java Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wojiaohuangyu/article/details/47132595
版权
这个功能我感觉以后会经常用到的，因为这样直接在网页上判断是一个十分简便的方法。 
<!DOCTYPE html>
<html>
<head>
<title>表单注册和验证</title>
<script type="text/javascript">
 function isEmail(){
	     var atindex=theStr.indexOf('@');
		 var dotindex=theStr.indexOf('.',atindex);
		 var flag=true;
		 thesub=theStr.substring(0,dotindex+1);
		 
		 if((atindex<1)||(atindex!=theStr.lastIndexOf('@'))|| (dotindex<atindex+2)||(theStr.length<=thesub.length)){
		     flag=false;
		 }else{
		    flag=true;
		 }
		 return flag;
	 }

  function check(){
     fr=document.form1;
	 if(fr.uid.value==""){
	    alert("用户ID必须要填写！");
		fr.uid.focus();
		return false;
	 }
	 if((fr.pwd1.value!="")||(fr.pwd2.value!="")){
	     if(fr.pwd1.value!=fr.pwd2.value){
		     alert("密码不一致，请重新输入并验证密码！");
			 fr.pwd1.focus();
			 return false;
		 }
	 }else{
	    alert("密码不能为空！");
		fr.pwd1.focus();
		return false;
	 }
	 if(fr.gender.value==""){
	    alert("性别必须要填！");
		fr.name.focus();
		return false;
	 }
	 if(fr.email.value!=""){
	    if(!isEmail(fr.email.value)){
		   alert("请输入正确的邮件名称！");
		   fr.email.focus();
		   return false;
		}
	 }
	 fr.submit();
  }
</script>
</head>
<body>
<form name="form1" id="form1" method="post" action="" >
   <table border=1 align="center" width="350">
   <tr align="middle"><th colspan="2" height="24">新用户注册</th></tr>
   <tr><td width="40%"><b>用 户 名</b>：</td>
   <td width="60%"><input maxlength="10" size="30" name="uid" type="text"></td>
   </tr>
   <tr><td><b>性    别</b>：</td>
   <td><input type="radio" value="boy" name="gender">男孩
   <input type="radio" value="girl" name="gender">女孩</td></tr>
   <tr><td><b>密    码</b>：</td>
   <td><input name="pwd1" type="password" size="32"></td></tr>
   <tr><td><b>确认密码</b>：</td>
   <td><input name="pwd2" type="password" size="32"></td></tr>
   <tr><td><b>密码问题</b>：</td>
   <td><input type="text" size="30" name="question" type="text"></td></tr>
   <tr><td><b>问题答案</b>：</td>
   <td><input type="text" size="30" name="answer" type="text"></td></tr>
   <tr><td><b>Email</b>：</td>
   <td><input maxlength="50" size="30" name="email" type="text"></td></tr>
   <tr><td><b>联系电话</b>：</td>
   <td><input maxlength="50" size="30" name="tel" type="text"</td></td></tr>
   <tr><td><b>职    业</b>：</td>
   <td><select name="career" class="input1"/>
   <option value="student" selected="selected">学生</option>
   <option value="teacher">老师</option>
   <option value="worker">工人</option>
   <option value="famer">农民</option>
   <option value="business">商人</option>
   </td>
   </tr><tr>
   <td></td><td><input type="submit" value="注册" name="submit" onClick="return check()">
   <input type="reset" value="清除" name="submit2"></td></tr>
   </table>
   </form>
</body>
</html>

黄小鱼ZZZ
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 表单验证
qq_42287758的博客
08-12 124
表单验证 本章内容 通过js方法进行表单验证 正则表达式的使用 第一节 表单校验 1.表单提交原理 使用submit按钮结合表单的onsubmit事件进行校验并提交数据 使用js代码进行校验，并通过表单的submit方法进行提交 <!DOCTYPE html> <html> <head> <...
JavaScript之表单验证
m0_67331668的博客
03-07 822
兄弟们，我又又又来啦，今天给大家带来的是表单验证 目录 一、简单验证 二、 正则验证 《1》什么是正则验证？ 《2》正则的规矩 《3》正则的注意事项 《4》正则的使用 三、二级联动 什么是二级联动？ 一、简单验证 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表单验证</title> <s...
JavaScript表单验证
weixin_52629592的博客
06-14 1万+
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.在表单验证中,我们通常使用如下的验证功能:验证用户名与密码为指定格式在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等验证单选框所选内容最常见的验证单选框就是验证
原生js实现表单验证（提交后验证）
08-29
在平常的页面当中，我们经常用到表单和表单验证，表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者，在这里贴下我的菜鸟代码。
Focus()方法
weixin_30656145的博客
02-11 390
TextBox控件支持Focus()方法，其用于将初始表单焦点转移到具体的某个TextBox控件上。默认情况下，当第一次打开页面时，没有表单字段获得焦点。如果想要用户更方便地完成表单，可以设置表单中的某个字段自动获得焦点。 代码如下： <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD X...
JavaScript实现仿网易通行证表单验证
10-24
主要介绍了JavaScript实现仿网易通行证表单验证，十分的实用，有需要的小伙伴可以参考下。
JavaScript表单验证实现代码
12-10
本文将深入探讨如何使用JavaScript来实现基本的表单验证。 首先，对于必填项目的验证，我们可以编写一个名为 `validate_required` 的函数。这个函数接收两个参数：`field` 和 `alerttxt`。`field` 是要验证的表单...
javascript html5实现表单验证
10-22
主要为大家详细介绍了javascript html5实现表单验证的具体代码，感兴趣的小伙伴们可以参考一下
JavaScript实现注册页面的表单验证
03-10 8936
基于javaweb的学习以及为后面做项目做基础，其次参考资料做了些琢磨来实现这个登录界面的注册的验证，下面是效果图（顺便附加素材） 下面是代码展示 1.注册界面register.html 无标题文档 会员注册 会员邮箱: 请输入有效的邮箱地址 会员名:
Javascript（五）javascript实现表单验证
一枝韩独秀的博客
08-05 8744
表单验证 为了保证用户提交的信息都是正确的，保证系统的安全性，验证是必不可少的，验证一般分为两种方式。 客户端验证：直接在客户端执行JS进行验证，验证的过程中和服务器端没有任何的交互 服务器端验证：页面将验证信息传回服务器端，服务器端进行验证，并将验证的结果发送回客户端 这两个验证都是必须的，因为客户端的验证安全性不是太高，但是可以防止80%以上的用户的误操作，可以减轻服务器端的压力，而且速...
原生js实现表单的正则验证，所有验证都通过后提交按钮才可用
热门推荐
u010552788的专栏
03-30 2万+
实现了如下功能： 1.用户名：onfouc显示msg规则；onkeyup计算字符，其中中文为两个字符；onblur，验证是否通过 2.邮箱：onblur 正则匹配，正则是根据自己的需求写的，可以根据个人需求更改 3..密码：onkeyup时显示密码的强弱度，onblur时验证密码，是否为相同字符，是否全字符，或全数字，长度是否符合要求 4.确认密码：验证是否和
HTML开发与应用：用Javascript实现提交功能（表单验证）
qq_42802111的博客
07-31 6184
HTML开发与应用：用Javascript实现提交功能（表单验证）。 之前我们已经实现过表单的input输入功能，但是并没有实现其中按钮的“提交”功能，而在HTML中想要实现这类功能就要使用到Javascript,而表单的验证也是JS中最为常见的功能，所以接下来我们来初步研究如何实现表单的验证功能。 在Javascript中实现函数的调用。 首先我们应该考虑到用户通过点击“提交”按钮来实现表...
JavaScript实现表单验证后的聚焦
AC_greener的博客
11-11 635
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form name="myform" onsubmit="return judge()" > <!-- 调用这个函数 --> <label>username: <input id
用jquery实现简单的表单验证效果
natalie86的专栏
01-11 1032
看了《锋利的jquery》一书，练习了下期中的一个用jquery写表单验证的例子。       效果如图：       总结：        这是个比较简单的表单验证，主要验证了表单中的用户名和邮箱两个必填选项。表单验证其实质是个不断往下过滤的过程。 主要思路：        （1）判断当前失去焦点的元素是“用户名”还是“邮箱”，然后分别处理。        （2）如果是“用
前端学习之JavaScript实现表单验证，全网（最详解析）
weixin_49919737的博客
08-29 741
表单验证
JavaScript实现表单验证
最新发布
06-08
好的，以下是一个简单的 JavaScript 表单验证的示例： HTML 代码： ```html ()"> 姓名: <input type="text" id="name" name="name"><br> 邮件: <input type="email" id="email" name="email"><br> 密码: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值