web前端必学功法之一：表单校验（2）

最新推荐文章于 2021-12-04 12:01:24 发布

我是小白菜鸟

最新推荐文章于 2021-12-04 12:01:24 发布

阅读量141

点赞数

文章标签： jquery html javascript

本文链接：https://blog.csdn.net/qq_42302014/article/details/120598528

版权

web前端必学功法之一：表单校验（2）

这里采用另一种写法，jQuery写法，在用jQuery写法之前，一定要引入jquery.js.

    <div class="container" style="margin-top: 60px;">
      <!-- 表单 -->
      <form class="form-horizontal" role="form" id="myform">
            <!-- 姓名文本框 -->
            <div class="form-group">
              <label for="userName"  class="col-sm-2 control-label">名字</label>
              <div class="col-sm-8">
                <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入姓名">
              </div>
            </div>
             <!-- 密码密码框 -->
            <div class="form-group">
              <label for="userPwd" class="col-sm-2 control-label">密码</label>
              <div class="col-sm-8">
                <input type="password" class="form-control" id="userPwd" name="userPwd" placeholder="请输入密码">
              </div>
            </div>

                         <!-- 年龄数值框 -->
                         <div class="form-group">
                              <label for="userAge" class="col-sm-2 control-label">年龄</label>
                              <div class="col-sm-8">
                                <input type="number" class="form-control" id="userAge" min="1" max="100" name="userAge" placeholder="请输入年龄">
                              </div>
                            </div>
             <!-- 性别复选框 -->
             <div class="form-group">
                  <label for="userSex" class="col-sm-2 control-label">性别</label>
                  <div class="col-sm-8">
                        <label class="checkbox-inline">
                              <input type="checkbox" name="userSex"  value="男"> 男
                          </label>
                          <label class="checkbox-inline">
                              <input type="checkbox" name="userSex"  value="女"> 女
                          </label>
                          <label class="checkbox-inline">
                              <input type="checkbox" name="userSex"  value="未知"> 未知
                          </label>
                  </div>
                </div>
             <!-- 爱好复选框 -->
             <div class="form-group">
                  <label for="userHobby" class="col-sm-2 control-label">爱好</label>
                  <div class="col-sm-8">
                        <label class="checkbox-inline">
                              <input type="checkbox" name="userHobby"  value="唱歌"> 唱歌
                          </label>
                          <label class="checkbox-inline">
                              <input type="checkbox" name="userHobby"  value="睡觉"> 睡觉
                          </label>
                          <label class="checkbox-inline">
                              <input type="checkbox" name="userHobby"  value="敲代码">敲代码
                          </label>
                  </div>
                </div>

                <!-- 城市下拉框 -->
                <div class="form-group">
                  <label for="userCity" class="col-sm-2 control-label">城市</label>
                  <div class="col-sm-8">
                        <select class="form-control" id="userCity" name="userCity">
                              <option value="">-请选择-</option>
                              <option value="上海">上海</option>
                              <option value="广州">广州</option>
                              <option value="深圳">深圳</option>
                              <option value="北京">北京</option>
                        </select>
                  </div>
                </div>

             <!-- 简介文本域 -->
             <div class="form-group">
                  <label for="userRemark" class="col-sm-2 control-label">简介</label>
                  <div class="col-sm-8">
                       <textarea class="form-control" name="userRemark" rows="3" id="userRemark"></textarea>
                  </div>
                </div>


            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" id="submitBtn">提交</button>
                &nbsp;&nbsp;&nbsp;
                <span id="msg" style="color: red;"></span>
              </div>
            </div>

          </form>
    </div>

    <script>
          $("#submitBtn").click(function(){
            // 验证姓名
            // 1)不能为空 2)长度为6-12位
            var userName = $("#userName").val();
            // 1)不能为空 
            if(isEmpty(userName)){
                   $("#msg").html("姓名不能为空");
                   return;
            }
            // 2)长度为6-12位
            if(userName.length < 6 || userName.length > 12 ){
                  $("#msg").html("姓名长度在6-12位之间");
                  return;
            }

            // 验证密码
            // 1)不能为空 2)长度为6-12位 3)不能包含姓名
            var  userPwd = $("#userPwd").val();

            // 1)不能为空 
            if(isEmpty(userPwd)){
                   $("#msg").html("密码不能为空");
                   return;
            }
            // 2)长度为6-12位
            if(userPwd.length < 6 || userPwd.length > 12 ){
                  $("#msg").html("密码长度在6-12位之间");
                  return;
            }
            // 3)不能包含姓名
            if(userPwd.indexOf(userName) != -1){
                  $("#msg").html("密码中不能包含姓名");
                  return;
            }

            // 验证年龄
            //  1)不能为空 2)范围在1-100之间

            var  userAge = $("#userAge").val();

            //  1)不能为空
            if(isEmpty(userAge)){
                   $("#msg").html("年龄不能为空");
                   return;
            }
            // 2)范围在1-100之间
            if(userAge < 1 || userAge > 100){
                  $("#msg").html("年龄范围在1-100之间");
                   return;
            }
            
            // 验证性别
            //   必须选择一项
            //获取被选中的单选框的值
            var userSex = $("[name = 'userSex']:checked").val();

            //  1)不能为空
            if(isEmpty(userSex)){
                   $("#msg").html("请选择性别!");
                   return;
            }

             // 验证爱好
            //   必须选择一项
            //获取爱好被选中的复选框
            var  hobbys = $("[name='userHobby']:checked");
            //判断是否选中(长度大于0);
            if(hobbys.length == 0){
                   $("#msg").html("请选择爱好！");
                   return;
            }
            var userHobby = "";
            //遍历得到选中的复选框的值

            for(var i = 0;i<hobbys.length;i++){
                    userHobby += hobbys[i].value + ",";  //jquery对象取下标就变成了dom对象

            }
            //截取字符串，去除最后多余的",";
            userHobby  = userHobby.substring(0,userHobby.length - 1);

            // 验证城市
            //   必须选择一项
            var userCity = $("#userCity").val();

            //  1)不能为空
            if(isEmpty(userCity)){
                   $("#msg").html("请选择城市!");
                   return;
            }
            //清空提示信息
            $("#msg").html("");

            //获取简介
            var userRemark = $("#userRemark").val();

            //弹出所有内容
                             
            var str = "姓名:" + userName + "\n密码:" + userPwd + "\n";
                      str +="年龄:" + userAge  + "\n性别:" +  userSex + "\n";
                      str +="爱好:" + userHobby + "\n城市:" +  userCity +"\n";
                      str +="简介:" + userRemark;
                      alert(str);

            //提交表单
            $("#myform").submit();


          });

            // 判断字符串是否为空
            // 如果为空,返回true,
            // 如果不为空,返回false
            // trim()：去除字符串前后空格

            function isEmpty(str){
                    if(str == null || str.trim() ==""){
                          return true;
                    }
                    return false;
            }
    </script>