script表单验证笔记

最新推荐文章于 2023-02-03 10:00:00 发布

OTF893

最新推荐文章于 2023-02-03 10:00:00 发布

阅读量536

点赞数

文章标签： json chrome 前端

本文链接：https://blog.csdn.net/weixin_62484294/article/details/121584002

版权

HTML JavaScript 表单验证正则表达式用户注册

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script>
       var ran; //这个是全局变量,为下面获取校验而声明
       //获取验证码
       function YZM(){
           ran=Math.floor(Math.random()*9000+1000);
           //获取span标签对象
           var span=document.getElementById('yzm_span');
           span.innerText=ran;
       }
           //校验用户名
       function checkName(){
           //获得用户名的值
           var uname=document.getElementById('uname').value;
           //获得span对象
           var span=document.getElementById('uname_span');
           //正则表达式
           var reg=/^[\u4e00-\u9fa5]{3,5}$/;
           if(uname==null||uname==""){
               span.innerText='错:用户名不能为空';
               span.style.color='red';
               return false;
           }else if(reg.test(uname)){
               span.innerText='对:用户名合法';
               span.style.color='green';
               return true;
           }
           else{
               span.innerText='错:用户名不合法'
               span.style.color='red';
               return false;
           }
       }


       //校验密码
       function checkPwd(){
           //获得用户名的值
           var uname=document.getElementById('pwd').value;
           //获得span对象
           var span=document.getElementById('pwd_span');
           //正则表达式
           var reg=/^\d{3,5}$/;
           if(uname==null||uname==""){
               span.innerText='错:密码不能为空';
               span.style.color='red';
               return false;
           }else if(reg.test(uname)){
               span.innerText='对:密码合法';
               span.style.color='green';
               return true;
           }
           else{
               span.innerText='错:密码不合法'
               span.style.color='red';
               return false;
           }
       }

       //校验邮箱
       function checkEmail(){
           //获得用户名的值
           var uname=document.getElementById('email').value;
           //获得span对象
           var span=document.getElementById('email_span');
           //正则表达式
           var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
           if(uname==null||uname==""){
               span.innerText='错:邮箱不能为空';
               span.style.color='red';
               return false;
           }else if(reg.test(uname)){
               span.innerText='对:邮箱合法';
               span.style.color='green';
               return true;
           }
           else{
               span.innerText='错:邮箱不合法'
               span.style.color='red';
               return false;
           }
       }


       //校验手机号
       function checkPhone(){
           //获得用户名的值
           var uname=document.getElementById('phone').value;
           //获得span对象
           var span=document.getElementById('phone_span');
           //正则表达式
           var reg=/^\d{11}$/;
           if(uname==null||uname==""){
               span.innerText='错:手机号不能为空';
               span.style.color='red';
               return false;
           }else if(reg.test(uname)){
               span.innerText='对:手机号合法';
               span.style.color='green';
               return true;
           }
           else{
               span.innerText='错:手机号不合法'
               span.style.color='red';
               return false;
           }
       }

       //校验性别的选择
       function checkSex(){
           //获得所有的性别选项
           var sex=document.getElementsByName('sex');
           //获得span对象
           var span=document.getElementById('sex_span');
           for(var i in sex){
               if(sex[i].checked){
                   span.innerText='性别选择成功';
                   span.style.color='green';
                   return true;
               }
           }
               span.innerText='请选择性别';
           span.style.color='red';
           return false;

       }




       //校验爱好的选择
       function checkhoby(){
           //获得所有的性别选项
           var fav=document.getElementsByName('fav');
           //获得span对象
           var span=document.getElementById('fav_span');
           for(var i in fav){
               if(fav[i].checked){
                   span.innerText='爱好选择成功';
                   span.style.color='green';
                   return true;
               }
           }
               span.innerText='请选择爱好';
           span.style.color='red';
           return false;

       }

       //校验籍贯的选择
           function checkAdress(){
               var sel=document.getElementById('sel').value;
               var span=document.getElementById('sel_span');
               if(sel==0){
                   span.style.color='red';
                   span.innerText='请选择籍贯'
                   return false;
               }
               else{
                   span.style.color='green';
                   span.innerText='成功选择籍贯';
                   return true;
               }
           }

           //校验
           function checkYZM(){
               var yzm=document.getElementById('yzm').value;
               var span=document.getElementById('yzm2_span');
               if(ran==yzm){
                   span.innerText='验证码输入正确'
                   span.style.color='green';
                   return true;
               }else{
                   span.innerText='验证码不正确,请重新输入'
                   span.style.color='red';
                   return false;
               }

           }

           //校验是否统一

           //disabled="true"
           function checkAgree(){
               //同意框
               var check=document.getElementById('check');
               //提交
               var sub=document.getElementById('sub');
               //sub提交的不可用不等于同意框的选择，取反的过程
               //同意框选择了，那么sub就变为false，就可以用了
               //同意框不选择，那么sub就是默认值true，就不可用
               sub.disabled=!check.checked;
           }

       //校验一遍所有的返回值，全部为true才可提交
       function zong(){
//&和&&都可以用作逻辑与的运算符，表示逻辑与（and），当运
//算符两边的表达式的结果都为true时，整个运算结果才为true，
//否则，只要有一方为false，则结果为false。
       var flag=checkName()&&checkPwd()&&checkEmail()&&checkPhone()&&checkSex()&&checkhoby()&&checkAdress()
       return flag;
       }

       </script>
   </head>
   <body οnlοad="YZM()">
       <center>
       <h3>注册页面</h3>
       <hr />
       <form action="" method="get" οnsubmit="return zong()">
       <table>
           <tr height="35px">
               <td width="150px">用户名：</td>
               <td width="400px">
                   <input type="text" name="uname" id="uname" value="" alt="用户名" οnblur="checkName()"/>
               <span id="uname_span">*用户名必须是3-5位的汉字</span>
               </td>
           </tr>
           <tr height="35px">
               <td>密码：</td>
               <td>
                   <input type="password" name="pwd" id="pwd" value="" alt="密码" οnblur="checkPwd()"/>
                   <span id="pwd_span">*密码规范为3-5位的数字</span>

               </td>
           </tr>
           <tr height="35px">
               <td>手机号：</td>
               <td>
                   <input type="text" name="phone" id="phone" value="" alt="手机号" οnblur="checkPhone()"/>
                   <span id="phone_span"></span>
               </td>
           </tr>
           <tr height="35px">
               <td>邮箱：</td>
               <td>
                   <input type="text" name="email" id="email" value="" alt="邮箱" οnblur="checkEmail()" />
               <span id="email_span"></span>
               </td>
           </tr>
           <tr height="35px">
               <td>性别：</td>
               <td>
                   男：<input type="radio" name="sex" id="" value="1" οnclick="checkSex()"/>
                   女：<input type="radio" name="sex" id="" value="0" οnclick="checkSex()"/>

                   <span id="sex_span">

                   </span>
               </td>
           </tr>
           <tr height="35px">
               <td>爱好：</td>
               <td>
                   <input type="checkbox" name="fav" id="" value="1" οnclick="checkhoby()"/>唱歌
                   <input type="checkbox" name="fav" id="" value="2" οnclick="checkhoby()"/>睡觉
                   <input type="checkbox" name="fav" id="" value="3" οnclick="checkhoby()"/>LOL<br />
                   <input type="checkbox" name="fav" id="" value="4" οnclick="checkhoby()"/>旅游
                   <input type="checkbox" name="fav" id="" value="5" οnclick="checkhoby()"/>高尔夫
                   <input type="checkbox" name="fav" id="" value="6" οnclick="checkhoby()"/>篮球
                   <span id="fav_span"></span>

               </td>
           </tr>
           <tr height="35px">
               <td>籍贯：</td>
               <td>
                   <select name="adress" id="sel" οnchange="checkAdress()">
                       <option value="0">--请选择--</option>
                       <option value="1">河南</option>
                       <option value="2">湖南</option>
                       <option value="3">海南</option>
                       <option value="4">云南</option>
                   </select>

                   <span id="sel_span"></span>
               </td>
           </tr>

           <tr height="35px">
               <td>验证码</td>
               <td>
                   <input type="number" name="" id="yzm" value="" οnblur="checkYZM()"/>
                   <span id="yzm_span"></span>
                   <span id="yzm2_span"></span>
               </td>
           </tr>

           <tr height="35px">
               <td>个人介绍：</td>
               <td>
                   <textarea name="intro" rows="8" cols="30"></textarea>
               </td>
           </tr>

           <tr height="35px">
               <td colspan="2" align="center">
                   <input type="checkbox" name="" id="check" value="" οnclick="checkAgree()">是否同意本公司协议
               </td>
           </tr>
           <tr height="35px">
               <td colspan="2" align="center">
                   <input type="submit" id="sub" value="注册" disabled="true"/>
               </td>
           </tr>
       </table>
       </form>
       </center>
   </body>
</html>