js校验form表单

已于 2022-02-23 16:59:12 修改
阅读量1k 收藏 5
点赞数 1
分类专栏： 前端 文章标签： javascript css html
于 2019-10-10 21:22:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bingmo_/article/details/102491162
版权 
<html>
   <head>
      <title>js校验form表单</title>
      <meta charset="UTF-8"/>
      <!--声明css代码域-->
      <style type="text/css">
         /*设置背景图片*/
         body{
            background-image: url(img/b.jpg);
         }
         /*设置tr样式*/
         tr{
            height: 40px;
         }
         /*设置div样式*/
         #showdiv{
            border: solid 1px #FF0000;
            border-radius: 10px;
            width: 500px;
            margin: auto;
            margin-top: 40px;  
         }
         /*设置table*/
         table{
            margin: auto;
            color: white;  
         }
         span{
            font-size:13px;
         }
         #codeSpan{
            font-size:20px;
         }
      </style>
      <!--声明js代码域-->
      <script type="text/javascript">
         //常见验证码
            function createCode(){
               //创建随机四位数字
               var code=Math.floor(Math.random()*9000+1000);
               //获取元素对象
               var span=document.getElementById("codeSpan");
               //将数字存放到span中
               span.innerHTML=code;               
            }
         //验证用户名
            function checkUname(){
               //获取用户的用户名信息
                  var uname=document.getElementById("uname").value;
               //创建校验规则
                  var reg=/^[\u4e00-\u9fa5]{2,4}$/
               //获取span对象
                  var span=document.getElementById("unameSpan");
               //开始校验
                  if(uname=="" || uname==null){
                     //输出校验结果
                     span.innerHTML="用户名不能为空";
                     span.style.color="red";
                     return false;
                  }else if(reg.test(uname)){
                     //输出校验结果
                     span.innerHTML="用户名ok";
                     span.style.color="green";
                     return true;
                  }else{
                     //输出校验结果
                     span.innerHTML="用户名不符合规则";
                     span.style.color="red";
                     return false;
                  }
               
            }
         //验证密码
            function checkPwd(){
               //获取用户的密码信息
                  var pwd=document.getElementById("pwd").value;
               //创建校验规则
                  var reg=/^[a-z]\w{5,7}$/;
               //获取span对象
                  var span=document.getElementById("pwdSpan");
               //开始校验
                  if(pwd=="" ||pwd==null){
                     //输出校验结果
                     span.innerHTML="*密码不能为空";
                     span.style.color="red";
                     return false;
                  }else if(reg.test(pwd)){
                     //输出校验结果
                     span.innerHTML="*密码ok";
                     span.style.color="green";
                     return true;
                  }else{
                     //输出校验结果
                     span.innerHTML="*密码格式不正确";
                     span.style.color="red";
                     return false;
                  }
               checkPwd2();
            }
         //校验确认密码
            function checkPwd2(){
               //获取第一次密码
               var pwd=document.getElementById("pwd").value;
               //获取确认密码
               var pwd2=document.getElementById("pwd2").value;
               //获取span对象
               var span=document.getElementById("pwd2Span");
               //比较两次密码是否相同
               if(pwd2==""||pwd2==null){
                  span.innerHTML="确认密码不能为空";
                  span.style.color="red";
                  return false;
               }else if(pwd==pwd2){
                  span.innerHTML="确认密码ok";
                  span.style.color="green";
                  return true;
               }else{
                  span.innerHTML="两次密码不一致";
                  span.style.color="red";
                  return false;
               }
            }
         //校验手机号
            function checkPhone(){
               return checkField("phone",/^1[3,4,5,7,8]\d{9}$/);
            }
         //校验邮箱
            function checkMail(){
               return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ )
               
               
            }
         //校验籍贯
            function checkAddress(){
               //获取用户选择的数据
               var sel=document.getElementById("address").value;
               //获取span
               var span=document.getElementById("addressSpan");
               //校验
               if(sel!=0){
                  span.innerHTML="籍贯选择成功";
                  span.style.color="green";
                  return true;
               }else{
                  span.innerHTML="籍贯不能为请选择";
                  span.style.color="red";
                  return false;
               }
               
               
            }
         //校验爱好
            function checkFav(){
               //获取所有的爱好
               var favs=document.getElementsByName("fav");
               //获取span
               var span=document.getElementById("favSpan");
               //遍历
               for(var i=0;i<favs.length;i++){
                  if(favs[i].checked){
                     span.innerHTML="爱好选择成功";
                     span.style.color="green";
                     return true;
                  }
               }
               
               span.innerHTML="爱好至少选则一项";
               span.style.color="red";
               return false;
               
            }
         //校验是否同意公司协议
            function checkAgree(){
               document.getElementById("sub").disabled=!document.getElementById("agree").checked;
            }
         //提交判断
            function checkSub(){
               checkUname();
               checkPwd();
               checkPwd2();
               checkPhone();
               checkMail();
               checkAddress();
               checkFav();
               return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav();
            }
/*-------------------------------------------------------------------------------------------------*/
         //封装校验:相同的保留，不同的传参。
         function checkField(id,reg){
            //获取用户数据
               var inp=document.getElementById(id);
               var va=inp.value;
               var alt=inp.alt;
            //创建校验规则
            //获取span对象
               var span=document.getElementById(id+"Span")
            //开始校验
               if(va=="" ||va==null){
                  //输出校验结果
                  span.innerHTML=alt+"不能为空";
                  span.style.color="red";
                  return false;
               }else if(reg.test(va)){
                  //输出校验结果
                     span.innerHTML=alt+"ok";
                     span.style.color="green";
                     return true;
               }else{
                  //输出校验结果
                     span.innerHTML=alt+"不符合规则";
                     span.style.color="red";
                     return false;
               }
         }
      </script>
   </head>
   <body οnlοad="createCode()">
      <div id="showdiv">
      <form action="#" method="get" οnsubmit="return checkSub()">
         <table>
            <tr>
               <td width="80px">用户名:</td>
               <td width="200px">
                  <input type="text" name="uname" id="uname" value="" οnblur="checkUname()" alt="用户名"/><span id="unameSpan">*2-4位汉字</span>
               </td>
            </tr>
            <tr>
               <td>密码:</td>
               <td>
                  <input type="password" name="pwd" id="pwd" value="" οnblur="checkPwd()"/>
                  <span id="pwdSpan"></span>
               </td>
            </tr>
            <tr>
               <td>确认密码:</td>
               <td>
                  <input type="password" name="pwd2" id="pwd2" value="" οnblur="checkPwd2()"/>
                  <span id="pwd2Span"></span>
               </td>
            </tr>
            <tr>
               <td>手机号:</td>
               <td>
                  <input type="text" name="phone" id="phone" value="" alt="手机号" οnblur="checkPhone()"/>
                  <span id="phoneSpan"></span>
               </td>
            </tr>
            <tr>
               <td>邮箱：</td>
               <td>
                  <input type="text" name="mail" id="mail" value="" alt="邮箱" οnblur="checkMail()"/>
                  <span id="mailSpan"></span>
                  
            </tr>
            <tr>
               <td>性别</td>
               <td>
                  男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/>
                  女 <input type="radio" name="sex" id="sex" value="1" />
               </td>
            </tr>
            <tr>
               <td>籍贯:</td>
               <td>
                  <select name="address" id="address" οnchange="checkAddress()">
                     <option value="0">--请选择--</option>
                     <option value="1">北京</option>
                     <option value="2">上海</option>
                     <option value="3">广州</option>
                  </select>
                  <span id="addressSpan"></span>
               </td>
            </tr>
            <tr>
               <td>爱好:</td>
               <td>
                  <input type="checkbox" name="fav" id="" value="1" οnclick="checkFav()"/>LOL
                  <input type="checkbox" name="fav" id="" value="2" οnclick="checkFav()"/>睡觉
                  <input type="checkbox" name="fav" id="" value="3" οnclick="checkFav()"/>吃饭<br />
                  <input type="checkbox" name="fav" id="" value="4" οnclick="checkFav()"/>打豆豆
                  <input type="checkbox" name="fav" id="" value="5" οnclick="checkFav()"/>看电影
                  <input type="checkbox" name="fav" id="" value="6" οnclick="checkFav()" />听歌
                  <span id="favSpan"></span>
               </td>
            </tr>
            <tr>
               <td>个人介绍:</td>
               <td>
                  <textarea name="intro" rows="4" cols="40" id="intro"></textarea>
                  
               </td>
            </tr>
            <tr>
               <td>验证码:</td>
               <td>
                  <input type="text" name="code" id="code" value="" style="width: 100px;"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span id="codeSpan" οnclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></span>
               </td>
            </tr>
            <tr>
               <td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" οnclick="checkAgree()"/>是否同意本公司协议</td>
            </tr>
            <tr>
               <td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/></td>
            </tr>
         </table>
      </form>
      </div>
   </body>
</html>
bingmo_
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS经典小项目-form表单校验
05-18
通过这个原生JS的小项目，你可以深入理解表单校验的原理，掌握如何使用JavaScript实现高效且友好的表单验证机制。这不仅提高了网页应用的安全性，还能提升用户的操作体验。在实际开发中，这样的技能是必不可少的。
基于javascript的Form表单验证
10-20
本文将深入探讨如何使用JavaScript进行基于Form表单的验证。表单验证是确保用户输入数据有效性和完整性的关键步骤，可以防止无效数据提交到服务器，从而提高用户体验并减少服务器处理错误数据的压力。 首先，我们来...
JavaScript之Form表单及表单校验完整代码
熊凯瑞的博客
09-05 829
了解基础的form表单相关知识，同时对表单校验有更深的认识，最完整的表单校验代码，可以直接使用，用纯纯的干货增长丰富的知识。
js 实现简单form表单校验
逆风优雅的博客
01-06 394
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
form表单校验
神zhi殇的博客
07-12 1674
vue-element-form-表单验证
js——form表单验证
a805814077的博客
12-30 1403
使用js实现简易表单验证
js学习之校验form表单
独狼的博客
06-26 447
<html> <head> <title>js校验form表单</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> /*设置背景图片*/ body{ background-image: url(img/b.jpg); } /*设置tr样式*/ tr{ height: 40
React的form表单自定义校验规则
chen_ac的博客
06-18 466
React的form表单自定义校验规则
jQuery对form表单进行校验
NullPointerException的博客
02-12 4061
需求：对以下表单进行校验代码实现：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉列表左右选择&lt;/title&gt; &lt;script type="text/javascript" src="../../res
JavaScript的form表单验证中的身份证校验
m0_48745807的博客
12-01 1310
javaScript中form表单中的身份证号码的校验
Javascript的form表单校验输入框
m0_74359467的博客
12-06 554
对于每个输入框，我们使用条件语句来检查其值是否满足特定要求，并在不符合要求时显示警告框并返回false以阻止表单提交。同样地，我们使用正则表达式来验证电子邮件和电话号码的格式，使用比较运算符来验证年龄的范围。在HTML部分，我们将每个输入框与相应的标签进行关联，并在表单元素上添加了onsubmit事件来调用validateForm函数。否则，将阻止表单提交。首先定义了一个名为validateForm的JavaScript函数，该函数用于验证表单数据。在函数中，首先获取每个输入框的值，然后逐一进行验证。
jQuery的form表单校验插件
03-25
**jQuery的form表单校验插件** 在Web开发中，表单验证是必不可少的一环，它确保用户输入的数据符合预设的规则，避免无效数据的提交，提高用户体验。jQuery作为一个强大的JavaScript库，提供了丰富的功能，包括对DOM...
javascript将异步校验表单改写为同步表单
10-24
本文将探讨如何使用JavaScript将异步校验表单改写为同步形式，以便在提供更好的用户体验的同时，减少不必要的网络请求，减轻服务器负担。 首先，我们来看一下异步表单校验的一个典型例子：检查工号是否存在。在这个...
JavaScript的form表单验证中的身份证校验.pdf
12-16
### JavaScript中的身份证校验知识点详解 #### 一、引言 在进行Web应用程序开发时，表单验证是一项非常重要的功能，它可以确保用户输入的数据格式正确并符合预期的要求。其中，身份证号码验证尤其重要，因为它涉及...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 463
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1291
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1076
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 154
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
element form表单校验行内写法
09-07
element form表单校验是一种常用的前端表单校验方式，可以有效地对表单输入的内容进行验证，提高用户输入的...但对于复杂的校验规则，建议使用element form表单校验的自定义写法，通过js代码来实现更灵活的校验逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值