几种常见的js表单验证

最新推荐文章于 2022-10-26 08:00:00 发布
最新推荐文章于 2022-10-26 08:00:00 发布
阅读量852 收藏
点赞数

几种常见的js表单验证

以下是HTML代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

 <script language = "javascript">

   function cancel(){

 

     document.getElementById("Form").reset();

   }

   function check(){

   //验证用户名

   var username = document.getElementById("username");

   if(username.value.length==0){

      alert("用户名不能为空！");

      username.focus();

      return false;

   }

   if(username.value.length<6){

    alert("用户名长度不能低于6位！");

    username.value = "";

    username.focus();

      return false;

   }

    //验证密码，确认密码

    var pass = document.getElementById("password");

    var qrpass = document.getElementById("qrpassword");

    if(pass.value.length==0){

       alert("密码不能为空！");

       pass.focus();

       return false;

     }

     if(pass.value.length<6||pass.value.length>15){

          alert("密码的长度为6-15位！");

          pass.value = "";

          pass.focus();

          return false;

     }else if(pass.value!=qrpass.value){

      alert("两次密码输入不一致！");

      qrpass.value = "";

      qrpass.focus();

       return false;

     }

     //验证身份证号

     var idcard = document.getElementById("idcard");

     if(idcard.value.length==0){

     alert("请输入你的身份证号码!");

     idcard.focus();

     return false;

     }

     var card = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/

     if(!card.test(idcard.value)){

     alert("你输入的身份证号码不正确，请重新输入！");

     idcard.value="";

     idcard.focus();

     return false;

     }

    //验证性别

    var sex = document.getElementsByName("sex");

    var boo = true;

    for(var i = 0;i<sex.length;i++){

      if(sex[i].checked==true){

        boo = false;

        break;

      }

    }

    if(boo){

        alert("请选择你的性别！");

        return false;

      }

     //验证出生日期

     var data = document.getElementById("birthday");

      if(data.value.length==0){

       alert("请输入您的出生日期！");

       pass.focus();

       return false;

      }

     //YYYY-MM-DD || YYYY/MM/DD 的日期格式

     var a=/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})/

      if(!a.test(data.value)){

        alert("日期格式不正确！nn请输入YYYY-MM-DD或者YYYY/MM/DD的格式！");

        return false;

      } 

     //验证籍贯

     var slt=document.getElementById("region");

     if(slt.value=="0"){

        alert("请选择你的籍贯！");

         return false;

       }

     //验证爱好

     var flag = true;

     var aa = document.getElementsByName("hobby");

     for(i = 0;i<aa.length;i++){

     if(aa[i].checked==true){

        flag = false;

        break;

       }

      }

       if(flag){

        alert("请选择你的爱好！");

        return false;

       }

     //验证邮箱  

     var objName = document.getElementById("email");

     var pattern = /^[a-zA-Z0-9]{1,}@[a-zA-Z0-9]{1,10}[.](com|cn|net)$/;  

     if(objName.value==0){

        alert("请输入您的邮箱！");

        objName.focus();

        return false;

     }

     if (!pattern.test(objName.value)) {  

            alert("邮箱格式不正确，请重新输入!");

            objName.value="";

            objName.focus();

            return false;  

           }  

   //验证手机号码的

   var tel = document.getElementById("tel");

  var pattern= /^1[358]d{9}$/ 

  if(tel.value.length==0){

    alert("请输入你的手机号码！");

    tel.focus();

    return false;

  }

  if(!pattern.test(tel.value)) { 

    alert("你输入的手机号码无效，请重新输入！");

    tel.value="";

    tel.focus();

      return false; 

  } 

   //验证自我介绍

   var intro = document.getElementById("intro");

   if(intro.value.length==0){

    alert("自我介绍不能为空！");

     return false;

   

   }else if(intro.value.length<10){

     alert("自我介绍字数不能低于10字！");

     return false;

   }

   }

   function checknoAll(){

   var all = document.getElementsByName("all");

   var no = document.getElementsByName("no");

   if(no[0].checked==true){

       all[0].checked=false;

       var all = document.getElementsByName("hobby");

      for(i = 0;i<all.length;i++){

      if(all[i].checked==true){

         all[i].checked=false;

       }else if(all[i].checked==false){

 

         all[i].checked=true;

      }

 

    }

  }

  }         

  function  checkAll(){

    var all = document.getElementsByName("all");

    var no = document.getElementsByName("no");

    if(all[0].checked==true){

       no[0].checked=false;

       var all = document.getElementsByName("hobby");

       for(i = 0;i<all.length;i++){

       if(!all[i].checked==true){

        all[i].checked=true;

       }

    }

  } 

  }

   </script>

</head>

 

<body>

 <form action = "" method = "post" onsubmit = "return check();" id = "Form">      

   <table border = "1" bordercolor = "green" cellspacing = "1" cellpadding = "1" align = "left" width = "500">

         <tr>

            <td colspan = "2" align = "center"><font size = "5" color = "green"><b>用户注册</b></font></td>

        </tr>

          <tr>

              <td align = "right">用户名：</td><td><input type = "text" id = "username" style = "width:150px;height:20px"/></td>

         </tr>

         <tr>

              <td align = "right">密　码：</td><td><input type = "password" id = "password" style = "width:150px;height:20px"/></td>

          </tr>

          <tr>

              <td align = "right">确认密码：</td><td><input type = "password" id = "qrpassword" style = "width:150px;height:20px" οnpaste="return false"/>　<font color = "red">警告：</font>禁止粘贴</td>

          </tr>

           <tr>

              <td align = "right">身份证号：</td><td><input type = "text" id = "idcard" style = "width:150px;height:20px"/></td>

          </tr>

          <tr>

              <td align = "right">性　别：</td><td>男<input type = "radio" id = "sex" name = "sex" value = "boy"/>女<input type = "radio" name = "sex" id = "sex" value = "girl"/></td>

          </tr>

          <tr>

              <td align = "right">出生日期：</td><td><input type = "text" id = "birthday" style = "width:150px;height:20px"/>　<font color = "red">YYYY-MM-DD或者YYYY/MM/DD</font></td>

          </tr>

          <tr>

              <td align = "right">籍　贯：</td><td><select id = "region">

              <option value = "0">--请选择籍贯--</option>

              <option value = "1">河南省郑州市</option>

              <option value = "2">河南省信阳市</option>

              <option value = "3">北京市海淀区</option>

              <option value = "4">辽宁省大连市</option>

              <option value = "5">广东省深圳市</option>

              </select>

              </td>

          </tr>

          <tr>

              <td align = "right">爱　好：</td><td><input type = "checkbox" id = "hobby" value = "music"/>音乐

              <input type = "checkbox" id = "hobby" name = " hobby" value = "basketball"/>篮球

              <input type = "checkbox" id = "hobby" name = " hobby" value = "visitor"/>旅游

              <input type = "checkbox" id = "hobby" name = " hobby" value = "sleep"/>睡觉

               <font color = "red">*</font>

               <input type = "checkbox" id = "all" name = " all" onclick = "checkAll()"/>全选

                <input type = "checkbox" id = "no" name = " bo" onclick = "checknoAll()"/>反选</td>

          </tr>

           <tr>

              <td align = "right">邮　箱：</td><td><input type = "text" id = "email" style = "width:150px;height:20px"/></td>

          </tr>

            <tr>

              <td align = "right">手机号码：</td><td><input type = "text" id = "tel" style = "width:150px;height:20px"/></td>

          </tr>

          <tr>

              <td align = "right">自我介绍：</td><td><textarea id = "intro" style = "width:150px;height:50px"></textarea></td>

          </tr>

          <tr>

          <td colspan = "2" align = "right">

            <input type = "submit" value = " 提交注册信息 " />　　　　　　<input type = "reset" onclick = "cancel()" value = " 全部清空 "/>

          </td>

        </table>

     </form>

     </body>

</body>

</html>

高傲的苹果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript实现全选
黑马程序员广州中心的专栏
05-07 218
<!DOCTYPE html> <html><head> <meta charset=" utf-8"> <title>Demo</title> <script type="text/javascript"> window.onload=function(){ var box=document.getEleme...
Javascript--03 document的对象
qq_44534541的博客
04-14 202
1.window对象的属性和方法： 属性：location,history,document,status 方法：prompt(“提示语”,“默认值”)—会话框 alert(“提示语”)—弹窗 confirm(“提示语”)—确认窗口 要关闭的窗口.close() 注意：要关闭的是本窗口就是window.close(); open(“要打开的窗口地址”,“窗口名字”,“窗口特征：宽高，位置等等”)...
判断单选框是否被选中
weixin_44283589的博客
08-05 605
$(“#check”).is(“:checked”)
JavaScript之表单验证
weixin_64938628的博客
03-06 1万+
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。 目录 一.简单的表单验证 验证方式一: 验证方式二： 二.正则验证 一.正则的规则 内容 次数 二.正则的注意事项 三.二级联动 一.简单的表单验证 验证方式一: <html> <head> <meta charset="UTF-8"> <title>Title&...
js 几种常用的表单输入判断
ZetaChow
12-22 970
//函数名：chksafe//功能介绍：检查是否含有"",//,"/"//参数说明：要检查的字符串//返回值：0：是  1：不是function chksafe(a){  return 1;/* fibdn = new Array ("" ,"//", "、", ",", ";", "/"); i=fibdn.length; j=a.length; for (ii=0;ii { for (
js几种常用表单验证控件
04-18
NULL 博文链接：https://vipshow.iteye.com/blog/1838930
利用JS提交表单的几种方法和验证(必看篇)
10-21
下面小编就为大家带来一篇利用JS提交表单的几种方法和验证(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS--几种表单验证方式
10-27
几种表单验证的方式，JS验证脚本集合，弹窗 js jQuery表单验证例子
在表单提交前进行验证的几种方式整理
09-05
为了减轻后台压力，可以利用JavaScript在表单提交前对表单数据进行验证，本文整理了常用的几种方式，有需求的朋友可以参考下
最精简的全选CheckBox(使用getElementById)
masterjames的专栏
03-29 3105
网上很多都是用getElementByName的,但多层选择就不好使用了.因为没办法使用同一个名字.使用getElementById就可以解决这个问题.selectAll function sel(a){  for(i=1;i    document.getElementById("chk"+i).checked=!document.getElementById("chk"+i).chec
JavaScript中的表单验证
ren__wei_的博客
01-10 5668
文章目录1.什么是表单验证2.常见的表单验证 1.什么是表单验证 大多数网站的注册页面中，都会要求用户输入生日，我们知道日期的格式是yyyy-MM-dd并且由数字组成，中间不允许出现字母或是其他符号，如果填写格式与日期格式不符合，name注册将失败，这种操作就是表单验证的体现。 表单验证就是js在数据被送往服务器前，对html表单中的数据进行验证的过程，在验证所有信息均符合要求之后，经表单提交到服务器由服务器进行数据处理。常见的表单验证有：表单中的必填项目、输入的邮件是否合法，输入日期是否合法等。 2.常见
js实现表单验证-完整代码
qq_180494790的博客
10-26 4155
jq 封装js代码可以简化代码繁琐，这里我没有用 html5新增特性，纯采用 js 来一步步实现
JavaScript表单基本验证
m0_63223374的博客
04-12 3566
JavaScript表单基本验证技术
JavaScript表单
weixin_63680062的博客
02-12 1201
JS 表单 1. 获取表单 1. document.表单name属性值 2. document.getElementById(表单id) 3. document.forms[表单name属性值] 4. document.forms[索引] //从0开始 5. document.forms //取所有表单 例如： <body> <form id="myform" name="myform"></form> </body> <scr
JS判断单选框是否被选中事件
热门推荐
zhumizhumi的博客
10-28 1万+
<form> <input type="radio" id="radio1" /> <input type="button" onclick="check()" value="选中" /> <input type="button" onclick="uncheck()" value="取消" /> </form> fu...
document.getElementById详解
~飞 鸟 (*^__^*) 天 堂~
10-31 3125
document.getElementById(" ") 得到的是一个对象，用 alert 显示得到的是 “ object ”，而不是具体的值，它有 value 和 length 等属性，加上 .value 得到的才 是具体的值！ 参考资料： 1. document . getElementById 的用法和 DHTML.CHM 的下载地址 今天在网络上
document.getElementById()报错处理
cnds123的专栏
09-15 8415
本文介绍document.getElementById()报错原因及处理
js表单验证 方法
weixin_30561425的博客
04-28 846
1. 长度限制 <p>1. 长度限制</p><form name=a onsubmit="return test()"> <textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符！"></textarea> <br /> <input typ...
表单验证提交内容不能为空的几种方法
最新发布
06-07
有以下几种方法可以实现表单验证提交内容不能为空： 1. 前端验证：使用JavaScript在提交表单前进行验证，通过检查输入框是否为空或者是否符合指定的格式来判断输入是否合法。 2. 后端验证：在服务器端进行验证，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值