jQuery校验用户名密码等问题

最新推荐文章于 2024-06-11 06:30:23 发布

luobotoutou123

最新推荐文章于 2024-06-11 06:30:23 发布

阅读量1w

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/luobotoutou123/article/details/62423292

版权

一。代码验证：

以下是代码实现用户名密码简单校验。

以下是实现的效果

以下是全部代码：

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>添加客户</title>
   <style type="text/css">
       table{
           background-color:#CCCCCC;
           border:1px;
           width:100%;
       }
       table tr{
           height:20px;
       }
       table tr div{
           text-align:right;
       }
       td font{
           color:red;
       }
   </style>
   <script src="http://libs.baidu.com/jQuery/1.10.2/jquery.min.js"></script>
   <script type="text/JavaScript">
       function checkForm(){
            //jQuery取得用户输入的name，age,email值
           var name = $("#clientname").val();
           var age = $("#age").val();
           var email = $("#email").val();
           //如果名字为空
           if(name == ""){
           //假如name后面有lable标签，则清空后面的内容，即清除图中红色字体提示的“用户名不能为空”
               $(".name_lable").empty();
           //接着在类选择器.name后面添加一个lable标签
               $("#clientname").after("<label class='name_lable'><font>用户名不能为空</font></label>");
           }else{
           //不为空就清空后面的红色提示，如“用户名不能为空”，使其消失
               $(".name_lable").empty();
           }
           if(age == ""){
           //同上
               $(".age_lable").empty();
               $("#age").after("<label class='age_lable'><font>年龄不能为空</font></label>");
           }

           //如果年龄不为空且不是数字0-130之间，则在#age后面添加一个提示“年龄是0-130的数字”的提示；
           else if(checkAge(age)== false){
               $(".age_lable").empty();
               $("#age").after("<label class='age_lable'><font>年龄是0-130的数字</font></label>");
           }else{
               $(".age_lable").empty();
           }
               //定义一个方法，校验年龄是否在0-130之间，是就返回true；
           function checkAge(age){
           var flag = false;
           for(var i = 0; i<=130; i++){
               if(age == i){
                    flag = true;
                   break;
               }
           }
           return flag;
           }

           if(email == ""){
               $(".email_lable").empty();
               //在email后面添加个lable标签用after
               $("#email").after("<label class='email_lable'><font>邮箱不能为空</font></label>");
           }else{
               $(".email_lable").empty();
           }
           return false;
       }
       //年龄是0-100的数字

   </script>
   </head>
<body>

   <form name="client_form" action="jquery_事件.html" method="get" οnsubmit="return checkForm()">
       <table>
              <tr bgcolor="#f0f0f0" >
                   <td><div>客户类别:</div></td>
                   <td><select name="clienttypeid">
                       <option value="">大客户</option>
                       <option value="">小客户</option>
                       </select>
                   </td>

              </tr>
              <tr bgcolor="#f5f5f5">
                   <td><div><font>*</font> 姓名:</div></td>
                   <td>
                     <input id="clientname" type="text" name="clientname" value="" size="30">

                   </td>

              </tr>
              <tr bgcolor="#f5f5f5">
                   <td><div><font>*</font> 年龄:</div></td>
                   <td><input id="age" type="text" name="age" value="" size="30"></td>

              </tr>
              <tr bgcolor="#f0f0f0" >
                   <td><div>性别:</div></td>
                    <td>
                       <select name="sex">
                       <option value="1">男</option>
                       <option value="2">女</option>
                       </select>
                   </td>

              </tr>
              <tr bgcolor="#f5f5f5" >
                    <td><div>出生年月:</div></td>
                    <td>
                       <input type="text" name="birthday" value="" size="30">
                    </td>

              </tr>
              <tr bgcolor="#f0f0f0" >
                   <td><div>所属公司:</div></td>
                   <td><input type="text" name="company" value="" size="30"></td>

              </tr>
              <tr bgcolor="#f5f5f5" >
                   <td><div>职务:</div></td>
                   <td><input type="text" name="business" value="" size="30"></td>

              </tr>
              <tr bgcolor="#f0f0f0" >
                   <td><div>电话:</div></td>
                   <td><input type="text" name="tel" value="" size="30"></td>

              </tr>
              <tr bgcolor="#f5f5f5" >
                   <td><div>地址:</div></td>
                   <td><input type="text" name="adress" value="" size="30"></td>

              </tr>
              <tr bgcolor="#f0f0f0" >
                   <td><div><font>*</font>邮箱:</div></td>
                   <td><input id="email" type="text" name="email" value="" size="30"></td>

              </tr>
              <tr bgcolor="#f5f5f5" >
                   <td><div>业务往来情况:</div></td>
                   <td><textarea name="businessinfor" rows="5" cols="32"></textarea></td>

              </tr>
              <tr bgcolor="#f0f0f0" >
                   <td><div>客户照片:</div></td>
                   <td><input type="file" name="filepic"></td>

              </tr>
              <tr bgcolor="#f5f5f5" >
                   <td><div>事件提醒:</div></td>
                   <td><input type="text" name="eventawoke" value="" size="30"></td>
              </tr>
              <tr bgcolor="#f0f0f0" >
                   <td></td>
                   <td colspan="2"><input type="submit" value="提交">
                   <input type="reset" value="重置"></td>