js 表单验证

最新推荐文章于 2022-02-25 12:02:38 发布
最新推荐文章于 2022-02-25 12:02:38 发布
阅读量150 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32295383/article/details/81228452
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
 <form name="ff" action="as.html">
     <table width="519" height="163" id="table">
       <tr>
          <td class="col1">电子邮箱</td>
          <!--required email number 标签名字随便起-->
          <td  class="col2">
              <input id="email" type="text" required="required" email="email" name="email" οnblur="checkUserName(this)" />
              <span id="emailW">输入email，不能为空格式应该************</span>
          </td>    
       </tr>
       <tr>
          <td>会员名</td>
          <td>
              <input id="username" type="text" required="required" number="number" name="username" οnblur="checkUserName(this)" />
              <span id="usernameW">输入用户名，不能为空格式应该************</span>
          </td>
       </tr>
        <tr>
            <td>登录密码</td><td><input name="loginPwd" number="number" required="required"   type="password" id="loginPwd"  οnblur="checkUserName(this)" /><span  id="loginPwdW">输入email，不能为空格式应该************</span></td>
            </tr>
            <tr>
            <td>确认密码</td><td><input name="repeatPwd" required="required" number="number"    type="password" id="repeatPwd"    οnblur="checkUserName(this)" /><span  id="repeatPwdW">输入email，不能为空格式应该************</span></td>
            <select id="aa"></select>
            </tr>

        <tr>
          <td colspan="2" align="left" valign="middle">
            <input type="button" value="同意以下协议，提交注册" οnclick="validate()"/>
          </td>
        </tr>
    </table>
</form>
 </BODY>
 <script> 
    function checkUserName(obj){
        var value =obj.value;    
        var required=obj.getAttribute("required");
        var number=obj.getAttribute("number");
        var email=obj.getAttribute("email");
        var state=true;
        if(required=='required'){//非空校验
            console.log("----------");
            if(value==null||value.trim==""){
                 state=false;
            }
         }
         if(email=='email'){//email校验
              var reg=/^\w+([\-_\.]?\w*)*@\w+(\.\w+){1,3}$/i;
              if(!reg.test(value)){
                  state=false;
              }
          }
          if(number=='number'){//数字校验
               var reg=/^[0-9]*.?[0-9]*$/;
               if(reg.test(value)){
                    state=false;
               }
            }

        if(state==false){
            obj.style.background='red';
        }else{
            obj.style.background='';
        }
        return state;
    } 

     function validate(){
        var state=true;
        var inputs=document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;i++){
            var input=inputs[i];
            if(checkUserName(input)==false){
                state=false;
            }
        }
        if(state){
            document.ff.submit();
        }
     }        
 </script>
</HTML>
 

qq_32295383
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS源代码实现表单验证
写写代码，慢慢进步
08-17 3445
js源代码实现表单验证功能
JavaScript之表单验证
热门推荐
weixin_64938628的博客
03-06 1万+
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。 目录 一.简单的表单验证 验证方式一: 验证方式二： 二.正则验证 一.正则的规则 内容 次数 二.正则的注意事项 三.二级联动 一.简单的表单验证 验证方式一: <html> <head> <meta charset="UTF-8"> <title>Title&...
最全面的JS表单验证
syq8023的博客
02-25 613
1.两个日期比较 /* 用途：检查开始日期是否小于等于结束日期 输入： s：字符串 开始日期 格式：2001-5-4 e：字符串 结束日期 格式：2002-5-4 返回： 如果通过开始日期小于等于结束日期返回true,否则返回false */ function data_compare(s,e){ var arr=s.split("-"); var starttime=new Date(arr[0],arr[1],arr[2]);... } 2.为空或全是空格 /* 用途：检...
js表单验证
qq_49175003的博客
09-25 767
验证表单 表单验证，包括验证输入内容是否为空、验证是否输入正确手机号；验证密码是否输入正确；验证邮箱是否输入正确。 1、先用html写好form表单框架 register,html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
JavaScript中的表单验证
ren__wei_的博客
01-10 5672
文章目录1.什么是表单验证2.常见的表单验证 1.什么是表单验证 大多数网站的注册页面中，都会要求用户输入生日，我们知道日期的格式是yyyy-MM-dd并且由数字组成，中间不允许出现字母或是其他符号，如果填写格式与日期格式不符合，name注册将失败，这种操作就是表单验证的体现。 表单验证就是js在数据被送往服务器前，对html表单中的数据进行验证的过程，在验证所有信息均符合要求之后，经表单提交到服务器由服务器进行数据处理。常见的表单验证有：表单中的必填项目、输入的邮件是否合法，输入日期是否合法等。 2.常见
JavaScript表单验证完美代码
10-20
用原生JS写一个简单的表单验证功能，代码分为html部分和js部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
JavaScript 表单验证
01-19
JavaScript 表单验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 表单数据经常需要使用 JavaScript 来验证其正确性： 验证表单数据是否为空？ 验证输入...
js 表单验证网页特效
11-10
js 表单验证网页特效
JavaScript表单验证实现代码
12-10
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 被 JavaScript 验证的这些典型的表单数据有： 用户是否已填写表单中的必填项目？ 用户输入的邮件地址是否...
JS表单验证会员信息填写代码
04-07
JS表单验证会员信息填写代码是一款用户填写完成后，点击提交按钮，判断填写的信息是否符合要求，如不符合将弹出相应的修改信息要求，引导用户正确填写表单。
js验证表单 js验证表单
12-19
js表单验证控制代码大全 /* 目录: 1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字 、只能输入汉字 3:js判断是否输入英文、只能输入英文 4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字 5:只能输入英文字符和数字 6: js email验证 、js 判断email 、信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js密码验证、判断密码 2.1: js 不为空、为空或不是对象 、判断为空 、判断不为空 2.2:比较两个表单项的值是否相同 2.3:表单只能为数字和"_", 2.4:表单项输入数值/长度限定 2.5:中文/英文/数字/邮件地址合法性判断 2.6:限定表单项不能输入的字符 2.7表单的自符控制 1. 检查一段字符串是否全由数字组成 2. 怎么判断是否是字符 3. 怎么判断是否含有汉字 4. 邮箱格式验证 5. 数字格式验证 6. 电话号码格式验证 7. 判断输入是否为中文的函数 8. 综合的判断用户输入的合法性的函数 9. 判断密码是否输入一致 10. 判断用户名是否为数字字母下滑线 2.8:form文本域的通用校验函数 */ 1. 长度限制 function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符！"); document.a.b.focus(); return false; } } 2. 只能是汉字 3." 只能是英文 function onlyEng() { if(!(event.keyCode>=65&&event.keyCode<=90)) event.returnvalue=false; } 4. 只能是数字 function onlyNum() { if(!((event.keyCode>=48&&event.keyCode=96&&event.keyCode<=105))) //考虑小键盘上的数字键 event.returnvalue=false; } 5. 只能是英文字符和数字 6. 验证油箱格式 function isEmail(strEmail) { if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) return true; else alert("oh"); } 7. 屏蔽关键字(这里屏蔽***和****) function test() { if((a.b.value.indexOf ("***") == 0)||(a.b.value.indexOf ("****") == 0)){ alert(":)"); a.b.focus(); return false;} } <form name=a
超全JS表单验证函数
08-16
超全JS表单验证函数，包含常用的文本框，下拉列表，单选按钮，复选框，日期时间，邮箱，金额及特殊字符等校验，是javaWeb项目开发的重要技术资源
原生js实现表单验证（提交后验证）
08-29
在平常的页面当中，我们经常用到表单和表单验证，表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者，在这里贴下我的菜鸟代码。
JS判断QQ号是否合法、JS原生判断、正则判断
沐枫
09-02 1821
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
JavaScript表单校验
mqingo的博客
11-11 949
确认事件             事件触发函数             函数操作元素                          校验用户名                 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示                     事件: 焦点事件 onfocus                     触发函数                     ...
jQuery/表单校验
黄倩的博客
06-05 200
第七章 一.正则表达式：                          是一个描述字符 模式的对象，它是由一些特殊的符号组成的 二.正则表达式：                         定义正则表达式有两种构造形式：一种是普通方式，另一种是构造函数的方式 三.表达式的模式：                      1.简单模式：是指通过普通字符的组合来表达的模式    
表单验证
qq_43405642的博客
01-30 195
姓名-账号-密码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>星辰编程</title> <style> </style> </head> <body> <?php //定义变量并默认设置成空值 ...
js简单表单验证，判断不能为空
黑猫警长博客
06-01 5028
js简单表单验证<html> <head> <meta charset="gb2312"> <title>js简单表单验证</title> <script type="text/javascript"> window.onload=function() { var bt=document.getElementById("bt"); bt.onclick=function() { i
javascript表单验证
最新发布
05-20
JavaScript 表单验证是一个非常常见的需求，可以通过 JavaScript 来验证表单是否符合指定的格式要求。 以下是一个简单的表单验证示例： ```html 表单验证 <script type="text/javascript"> function ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值