jquery plugin 之 form表单验证插件

基于h5表单验证系统、扩展了对easyui组件的支持

先上图：

　　提示样式用到了伪对象的 {content: attr(xxx)}函数方法，实现提示信息能动态切换。

1、关键属性说明：

　　type: 表单元素类型（h5的input类型：number、email等）,
　　max: type为number、range时可用的属性,
　　min: type为number、range时可用的属性,
　　pattern: 正则表达式,
　　maxLength: 元素最大长度,
　　placeholder: 输入域的填写提示,
　　required: 必填
　　required-msg: 为空时的校验提示,
　　invalid-msg: 正则校验不通过的提示（对应pattern的校验规则）

2、demo - html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>javascript test</title>
    <link rel="stylesheet" type="text/css" href="css/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/valid.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <style>
    .hidden{
      display: none;
    }

    /* 表单校验样式 */
    .valid-item {
      display: inline-block;
      position: relative;
    }
    .valid-item:after {
      content: attr(data-msg);
      position: absolute;
      top: calc(100% + 2px);
      left: 0;
      color: #cc0066;
      font-size: 10px;
      opacity: 0;
      transition: opacity 0.5s ease;
      text-shadow: 1px 1px 5px silver;
      z-index: -1;
    }
    .valid-item.invalid:after {
      opacity: 1;
      z-index: 100;
    }
    </style>
</head>

<body>
  <div class="middle">
    <h5>
      <pre>
        表单校验：$(form).cform('valid');
      </pre>
      <pre>
        表单提交：$(form).cform('submit',fn);
      </pre>
    </h5>

    <form class="easyui-cform" action="index.do" method="post">
      <h5>第一种纯容器模式：根据type生成对应的表单元素</h5>
      <span class="valid-item" name="name" invalid-msg="字母、数字，以字母开头且最少3位" type="text" maxLength="4"
            value="sr" required pattern="^[a-zA-Z_][a-zA-Z0-9_@\.]{2,16}$" placeholder="字母、数字">
        <!-- <input >-->
      </span>
      <br>
      <br>
      <h5>第二种非纯容器模式：子节点已经包含表单元素，将不再生成新的表单元素，子节点按h5的表单属性配置</h5>
      <span class="valid-item" required-msg="必填项">
        <select name="sex" required style="width: 170px;">
          <option value="">--select--</option>
          <option value="1">man</option>
          <option value="2">women</option>
        </select>
      </span>
      <h5>非纯容器模式：easyui-numberbox组件解析</h5>
      <span class="valid-item" required-msg="数字必填项">
        <input class="easyui-numberbox" name="phone" required style="width: 170px;">
      </span>
      <h5>非纯容器模式：easyui-combobox组件解析</h5>
      <span class="valid-item" name="country" required-msg="必填项">
        <input id="cc" class="easyui-combobox" required data-options="
                                                          valueField: 'label',
                                                          textField: 'value',
                                                          data: [{
                                                              label: '',
                                                              value: 'select'
                                                          },{
                                                              label: 'java',
                                                              value: 'Java'
                                                          },{
                                                              label: 'perl',
                                                              value: 'Perl'
                                                          },{
                                                              label: 'ruby',
                                                              value: 'Ruby'
                                                          }
                                                      ]" />
      </span>
      <input type="submit" value="submit">
    </form>
  </div>
</body>
</html>

View Code