jq 表单操作

最新推荐文章于 2024-09-22 12:55:44 发布

zhan_lijian

最新推荐文章于 2024-09-22 12:55:44 发布

阅读量760

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/zhan_lijian/article/details/105359031

版权

JS 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

1. 表单序列化

表单一般字段都比较多怎么处理呢按照jq写法一个元素元素的取真蛋疼

$("#myForm").serializeArray() 如图一目了然舒服吧但这些整理都需要通过表单控件设置 name 属性

2.表单赋值也是蛋疼吧元素书写难受吧
也阔以理解为初始化（编辑状态）

function loadData(obj) {
            var key, value, tagName, type, arr;
            for (x in obj) {
                key = x;
                value = obj[x];
                $("[name='" + key + "'],[name='" + key + "[]']").each(function () {
                    tagName = $(this)[0].tagName;
                    type = $(this).attr('type');
                    if (tagName == 'INPUT') {
                        if (type == 'radio') {
                            $(this).attr('checked', $(this).val() == value);
                        } else if (type == 'checkbox') {
                            if (value != "" && value != null && value != "null") {
                                arr = value.split('@$@');
                                for (var i = 0; i < arr.length; i++) {
                                    if ($(this).val() == arr[i]) {
                                        $(this).attr('checked', true);
                                        break;
                                    }
                                }
                            }
                        } else {
                            $(this).val(value);
                        }
                    } else if (tagName == 'SELECT' || tagName == 'TEXTAREA') {
                        $(this).val(value);
                    }
                });

            }
        }

上面function 也阔以加disabled 的就变成详情显示了

3. 重置表单

$('#myform').reset()   这样是错误的 JQuery中没有reset方法

需要转成dom 再用reset方法即 $('#myform')[0].reset()

4. 表单校验

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/Verify.js"></script>
  <!-- <link href="css/Public.css" rel="stylesheet" type="text/css" /> -->
  <style type="text/css">
    fieldset {
      width: 500px;
      position: relative;
    }

    .imgBox {
      position: absolute;
      float: right;
      top: 10px;
      right: 10px;
      width: 200px;
    }

    .imgBox .fileinput {
      width: 100%;
    }

    span {
      font-size: 12px;
      color: #666;
    }
  </style>
</head>

<body>
  <div>
    /*!<br />
    * http://weishakeji.net/Utility/Verify/Index.htm?file=Demo/1-1.htm
    * 主 题：《表单录入验证》<br />
    * 说 明：通过控件属性实现验证，包括生成星号标注、非法提示等；<br />
    * 功能描述：<br />
    * 1、当录入框必填时，在控件后生成红色星号（设置star=false时不显示星号）；<br />
    * 2、根据控件属性判断需要录入的数据格式，如果非法则阻止提交并弹出提示<br />
    * 3、支持分组验证<br />
    * 4、可脱离微厦在线学习系统独立使用（需要JQuery库支持）<br />
    *<br />
    */</div>
  <fieldset>
    <legend>验证控件使用示例</legend>
    <form onsubmit="return false" place="right">
      <p>
        姓名：
        <div nullable="false" type="selectedDiv">
          <input name="" type="checkbox" size="6">131
          <input name="" type="checkbox" size="6">132
        </div>
      </p>
      <p>
        账号：
        <input name="" type="text" value="aa" nullable="false" datatype="user" />
      </p>
      <p>
        姓名：
        <input name="" type="text" size="6" datatype="chinese" lenlimit="2-4" alt="限2至4个中文字符"><span>（限中文）</span>
      </p>
      <p>
        姓名：
        <input name="" type="radio" size="6" nullable="false">
      </p>
      <p>
        年龄：
        <input type="text" size="4" datatype="uint" nullable="false" place="right" />
      </p>
      <p>
        电话：
        <input type="text" datatype="mobile|tel" alt="请输入正确的电话号码">
      </p>
      <p>
        邮箱：
        <input type="text" datatype="email" />
      </p>
      <p>
        学历：
        <select name="select" style="height:25px" nullable="false" alt="请选择学历" place="right">
          <option value="">--请选择--</option>
          <option value="5">硕士</option>
          <option value="4">本科</option>
          <option value="3">专科</option>
          <option value="2">中学</option>
          <option value="1">小学</option>
        </select>
      </p>
      <p>
        <input type="submit" name="button" class="button" value="验证表单" verify="true" />
      </p>
      <!-- <div class="imgBox">
        照片：<br />
        <img src="" width="100" height="100" class="photo" /><br />
        <input name="" type="file" fileallow="jpg|png" class="fileinput" />
        <br />
        <span>（仅限jpg、png图片）</span>
      </div> -->
    </form>
  </fieldset>
  <p>&nbsp;</p>
  <p>下载地址：<a href="https://github.com/weishakeji/Verify_Js" target="_blank">https://github.com/weishakeji/Verify_Js</a>
  </p>

  <script>
    saveFunc = function () {
      console.log(4234)
    }
  </script>

</body>

</html>