技能测试3:javascript表单验证入库

最新推荐文章于 2024-09-14 18:52:56 发布

living_ren

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量272

点赞数

分类专栏：小程序文章标签： javascript 表单验证

本文链接：https://blog.csdn.net/living_ren/article/details/78827462

版权

小程序专栏收录该内容

125 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>

<html>
<head>
   <meta charset="utf-8">
   <title>练习2：表单验证入库</title>
</head>
<body>
   <table align="center" width="500">
       <form action="test.html" method='post' οnsubmit="return check_form()">
       <tr>
           <td>用户名：</td>
           <td><input type="text" id="user" name='username' οnblur="check_user()"></td><td><span id="user_error"></span></td>
       </tr><br>
       <tr>
           <td>密码：    </td>
           <td><input type="password" id='pwd' name='pwd' οnblur="check_pwd()"></td><td><span id="pwd_error"></span></td>
       </tr><br>
       <tr>
           <td>性别：   </td>
           <td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value='女'>女<td>
           <td><span id='sex_error'></td>
       </tr><br>
       <tr>
           <td>手机号：</td>
           <td><input type="text" id="phone" name='phone' οnkeyup="check_phone()"></td>
           <td><span id='phone_error'></span></td>
       </tr><br>
       <tr>
           <td>邮箱：</td>
           <td><input type="text" id="mail" name='mail' οnblur="check_mail()"></td>
           <td><span id='mail_error'></span></td>
       </tr><br>
       <tr>
           <td>部门：</td>
           <td><input type="text" id="department" name='depart' οnblur="check_depart()"></td>
           <td><span id='department_error'></span></td>
       </tr><br>
       <tr>
           <td>简介：</td>
           <td> <input type="text" name="descs" οnblur="check_desc()"></td>
           <td><span id='desc_error'></span></td>
           <td><input type="hidden" name="time" id="time"></td>
       </tr><br>
       <tr>
           <td><input type="submit" value="注册" ></td>
           <td><input type="reset" value="重置"></td>
       </tr>
       </form>
</table>
</body>
   <script type="text/javascript">
       //验证用户名
       function check_user(){
           var user=document.getElementById('user').value;
           if(user==''){
               document.getElementById('user_error').innerHTML="<font color=red>用户名不能为空！</font>";
               return false;
           }else{
               document.getElementById('user_error').innerHTML='';
               return true;
           }
       }
       //验证密码
       function check_pwd(){
           var pwd=document.getElementById('pwd').value;
           if(pwd==''){
               document.getElementById('pwd_error').innerHTML="<font color=red>密码不能为空！</font>";
               return false;
           }else{
               document.getElementById('pwd_error').innerHTML='';
               return true;
           }
       }
       //验证性别
       function check_sex(){
           var sex=document.getElementsByName('sex');
           for(var i=0;i<sex.length;i++){
               if(sex[i].checked==true){
                   return true;
               }
           }
               document.getElementById('sex_error').innerHTML="性别未选择！";
               return false;
       }

       //验证手机
       function check_phone(){
           var phone=document.getElementById('phone').value;
           var len=phone.length;

          if(len<=11){
               document.getElementById('phone_error').innerHTML="<font color='blue'>您还剩下"+(11-len)+"可以输入！</font>";
           }else{
               document.getElementById('phone_error').innerHTML="<font color='red'>您输入超出无法继续输入！</font>";
               document.getElementById('phone').value=phone.substr(0,11);
           }
       }
       //验证邮箱
       function check_mail(){
           var mail=document.getElementById('mail').value;
           if(mail==''){
               document.getElementById('mail_error').innerHTML="<font color='red'>邮箱输入不能为空！</font>";
               return false;
           }else{
               var patt1=/@163(\.)com/ ;
               var patt2=/@hotmail(\.)com/;
               var patt3=/@qq(\.)com/;

               if(mail.search(patt1)!=-1){
                   document.getElementById('mail_error').innerHTML="<font color=blue>您输入的是163网易邮箱！</font>";
                       return true;
               }else if(mail.search(patt2)!=-1){
                   document.getElementById('mail_error').innerHTML="<font color=blue>您输入的是火狐hotmail邮箱！</font>";
                       return true;
               }else if(mail.search(patt3)!=-1){
                   document.getElementById('mail_error').innerHTML="<font color=blue>您输入的是腾讯QQ邮箱！</font>";
                       return true;
               }
               else{
                   document.getElementById('mail_error').innerHTML="您输入的邮箱格式有误请重新输入！"
                   return false;
               }
           }
       }

       //验证部门
       function check_depart(){
           var depart=document.getElementById('department').value;
           if(depart==''){
               document.getElementById('department_error').innerHTML="<font color='red'>部门名称输入不能为空！</font>";
               return false;
           }else{
               document.getElementById('department_error').innerHTML='';
               return true;
           }
       }

       //验证简介
       function check_desc(){
           var desc=document.getElementsByName('descs')[0].value;
           if(desc==''){
               document.getElementById('desc_error').innerHTML="<font color='red'>简介输入不能为空！</font>";
               return false;
           }else{
               document.getElementById('desc_error').innerHTML='';
               return true;
           }
       }

       //验证整体表单
       function check_form(){
           if(check_user()&&check_pwd()&&check_sex()&&check_mail()&&check_depart()&&check_desc()){
               return true;
           }else{
               return false;
           }
       }
   </script>
</html>