表单验证 [JS]

验证显示

在“输入框组”一节中，已介绍了表单验证的显示样式，具体表现为通过输入框为绿色文字和边框，不通过则为红色文字和边框：

提示样式

除这个提示外，也可在form标签处添加.validate-tips样式，显示样式则改为提示样式显示。

    <form class="form form-x validate-tips">
      ......
    </form>
  

验证方法

• 首先定义需要验证的表单ID值；
• 其次在需要验证的input标签上定义好验证属性data-validate的值，值为JSON格式，如邮箱验证data-validate='{"required":true,"email":true,"length":">=10","valid":"邮箱正确","invalid":"请填写10个以上字符的邮箱地址"}'
• 最后再调用验证方法，调用示例如下：

    <form id="validate">
      ...
    </form>
    <script>
      $(function(){
        $('#validate').validate();
      });
    </script>
  

邮箱验证示例

    <form class="form" id="emailvalidate">
      <div class="input-group">
        <label>邮箱</label>
        <div class="input-block">
          <input class="input" placeholder="请输入您的邮箱" type="text" data-validate='{"required":true,"email":true,"length":">=10","valid":"邮箱正确","invalid":"请填写10个以上字符的邮箱地址"}' />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
      </div>
    </form>
    <script>
      $(function(){
        $('#emailvalidate').validate();
      });
    </script>
  

不参与验证

当某个输入框存在且有相关验证规则，但特定情形下不参与验证时，可在.input-block上叠加.input-novalidate样式，即不参与验证，如下示例中的手机输入框。

    <form class="form validate-tips" id="novalidate">
      <div class="input-group">
        <label>邮箱</label>
        <div class="input-block">
          <input class="input" placeholder="请输入您的邮箱" type="text" data-validate='{"required":true,"email":true,"invalid":"请填写正确的邮箱地址"}' />
        </div>
      </div>
      <div class="input-group">
        <label>手机</label>
        <div class="input-block input-novalidate">
          <input class="input" placeholder="请填写你的手机号码" type="text" data-validate='{"required":true,"mobile":true,"invalid":"请填写中国大陆的手机号码"}' />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" class="button">提交</button>
        <button type="reset" class="button">重置</button>
      </div>
    </form>
    <script>
      $(function(){
        $('#novalidate').validate();
      });
    </script>
  

验证类别

框架定义了三类验证类型，一为验证结果的提示验证，二为验证是否的布尔验证，三是比较结果的比较验证。

提示验证

框架定义了valid验证成功及invalid验证失败提示，在有布尔验证或比较验证时有效，设置后可显示提示文本，无文本提示时不设置；

布尔验证

如{"required":true,"email":true}，其验证的类别有两个，一个是required，要求此输入框为必填，在未填写的情况，验证不通过；另一个是email，要求输入框输入内容为邮件，输入其他内容则验证不通过；条件均满足的情况下才通过验证。

框架已定义了常用的布尔验证类别，类别内容请参考下表；错误提示内容自主定义；

比较验证

比较验证与类别验证相同，只是值不同，格式为{"length":">=3","compare":">=500"}，即输入框的字符长度少于3个符，值大于500，否则不通过验证。

框架未定义的验证类别，则可以通过pattern类别来自定义验证规则。

提交参数

框架同时还定义了提交时的参数设置，进一步方便了用户的体验；

在需要弹出对话框的情况下，需要用到对话框相关的JS功能。

使用方法为

    <form id="submitform">
      ...
    </form>
    <script>
      $(function(){
        $('#form').validate({
          "valid":"通过校验",
          "confirm":{
            "target":{
              "id":"dialog",
              "text":"确认提交表单？",
              "confirm":"确认",
              "cancel":"取消",
            },
            "dismiss":false
          },
          "async":true,
          "ajax_email":function(data){console.log(data);},
          "onsubmit":function(){console.log("onsubmit");},
          "success":function(data){console.log(data);},
        });
      });
    </script>
  

验证示例

常用的验证类型及示例，如注册：

手机

13800138000已存在无法通过，改为其他值则通过校验。

验证码

改变手机号码或输入错误的验证码均无法通过校验

邮箱

头像

姓名

性别

女士 先生 保密

已设为不参与验证

密码

重复密码

提交 重置

请输入验证码
123456

确定

关闭

    <form class="form validate-tips" id="demo" enctype="multipart/form-data" method="post" action="/2.0/data/ajax-data.php">
      <div class="input-group">
        <label>手机</label>
        <div class="input-block">
          <div class="input-inline">
            <input type="text" name="mobile" id="mobile" value="13800138000" class="input" placeholder="请输入您的手机号码" data-validate='{"required":true,"mobile":true,"ajax":{"url":"/2.0/data/validate-ajax-mobile.php","data":"email,fullname"},"invalid":"请输入手机号码"}' />
            <div class="addon"><input class="button" id="sendsms" name="sendsms" type="button" value="手机验证码" /></div>
          </div>
          <div class="input-help input-help-right">13800138000已存在无法通过，改为其他值则通过校验。</div>
        </div>
      </div>
      <div class="input-group">
        <label>验证码</label>
        <div class="input-block">
          <input type="text" name="code" class="input" placeholder="请输入6位数验证码" data-validate='{"required":true,"number":true,"length":"==6","ajax":{"url":"/2.0/data/validate-ajax-code.php","data":"mobile"},"invalid":"验证码有误"}' />
          <div class="input-help input-help-right">改变手机号码或输入错误的验证码均无法通过校验</div>
        </div>
      </div>
      <div class="input-group">
        <label>邮箱</label>
        <div class="input-block">
          <input type="text" name="email" class="input" placeholder="请输入您的邮箱" data-validate='{"required":true,"email":true,"invalid":"请输入邮箱"}' />
        </div>
      </div>
      <div class="input-group">
        <label>头像</label>
        <div class="input-block">
          <div class="input-upimage">
            <a href="javascript:;">
              <input name="face" type="file" data-validate='{"required":true,"file":{"ext":"jpeg,jpg,png,gif","size":"<1024","type":"image"},"invalid":"请上传1M以内的jpg,jpeg,png,gif图片"}' />
            </a>
            <span></span>
            <img name="image" />
          </div>
        </div>
      </div>
      <div class="input-group">
        <label>姓名</label>
        <div class="input-block">
          <input type="text" name="fullname" class="input" placeholder="请输入中文姓名" data-validate='{"required":true,"chinese":true,"invalid":"请输入中文姓名"}' />
        </div>
      </div>
      <div class="input-group">
        <label>性别</label>
        <div class="input-block input-novalidate">
          <div class="input-check input-check-inline">
            <label><input type="radio" name="sex" value="0" data-validate='{"required":true,"radio":true,"invalid":"请选择性别"}' /><i></i> 女士</label>
            <label><input type="radio" name="sex" value="1" /><i></i> 先生</label>
            <label><input type="radio" name="sex" value="2" /><i></i> 保密</label>
          </div>
          <div class="input-help">已设为不参与验证</div>
        </div>
      </div>
      <div class="input-group">
        <label>密码</label>
        <div class="input-block">
          <input type="password" name="password" class="input" placeholder="请输入密码" data-validate='{"required":true,"password":true,"invalid":"密码必须包含字母、数字、特殊字符三种且长度至少8位"}' />
        </div>
      </div>
      <div class="input-group">
        <label>重复密码</label>
        <div class="input-block">
          <input type="password" name="repassword" class="input" placeholder="请输入密码" data-validate='{"required":true,"password":true,"repeat":"password","invalid":"两次输入的密码不一致"}' />
        </div>
      </div>
      <div class="form-button">
        <button type="submit" id="demosubmit" class="button">提交</button>
        <button type="reset" class="button">重置</button>
      </div>
    </form>
  

JS调用

    <script>
      $(function(){
        $('#demo').validate({
          "valid":"通过校验",
          "toggle":"#demosubmit",
          "confirm":{
            "target":{"id":"democonfirm","text":"确认提交？","confirm":"提交","cancel":"取消","block":true},
            "dismiss":false
          },
          "async":1,
          "ajax_mobile":function(data){console.log(data);},
          "onsubmit":function(){
            $().dialog({
              "target":{"id":"demoonsumbit","text":"<div class=\"loader\"><i></i></div><br />正在提交"},
              "dismiss":false
            });
          },
          "success":function(data){
            $().dialog({"close":"#demoonsumbit"});
            $().dialog({
              "target":{"id":"demosuccess","text":data["msg"],"dark":true},
              "style":"margin-top",
              "show":"fixed-top-center",
              "dismiss":false,
              "cover":false,
              "timer":2
            });
          },
        });
        //短信发送
        $("#sendsms").button({
          "validate":{
            "data":"#mobile",
            "attr":{"text":"手机有误","class":"button"}
          },
          "confirm":{
            "dialog":{"target":"#smsdialog","dismiss":false},
            "attr":{"text":"正在确认","class":"button","disabled":true},
            "function":function(){
              //触发验证框
              $("#smsdialog").find('[data-form="verify"]').trigger("click");
              //这里可以加入获取验证码的函数
            }
          },
          "ajax":{
            "url":"/2.0/data/validate-ajax-code.php",
            "data":"#mobile,#email",
            "attr":{"text":"正在发送","class":"button border-main"},
            "function":function(data){
              $("#sendsms").val(data["msg"]);
              var $text="请输入验证码，10分钟有效期。<br /><span class=\"size-large\">"+data["code"]+"</span>";
              $().dialog({
                "target":{"id":"codevalue","text":$text,"close":true},
                "dismiss":false
              });
            }
          },
          "timer":{
            "attr":{"text":"开始倒计时","class":"button bg-danger"},
            "second":10,
            "text":"#s# 秒倒计时",
            "function":function(data){
              $("#sendsms").removeClass("bg-danger").attr("disabled",false).val("重新发送");
            },
          },
        });
      });
    </script>
  

验证对话框

    <div class="dialog" id="smsdialog">
      <form id="dialog-verify" class="dialog-body dialog-content">
        <div class="dialog-text">
          <p>请输入验证码<br /><span class="size-large text-main">123456</span></p>
          <div class="input-group">
            <div class="input-block" align="center">
              <div class="input-verify" data-form="verify">
                <input type="text" id="verify" name="verify" id="verify" maxlength="6" class="input" data-validate='{"required":true,"ajax":{"url":"/2.0/data/button-ajax-verify.php","data":"#mobile"},"invalid":"请输入验证码"}' />
                <ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
              </div>
            </div>
          </div>
          <div data-confirm="dialog" class="hidden">确定</div>
        </div>
        <div data-cancel="dialog" class="dialog-confirm">关闭</div>
      </form>
    </div>
    <script>
      $(function(){
        $('#dialog-verify').validate({
          "ajax_verify":function(data){
            if(data["error"]===0){
              $("#smsdialog").find('[data-confirm="dialog"]').trigger("click");
            }
          }
        });
      });
    </script>