拼图开发文档

表单验证 [JS]

除了原生的表单验证外,框架还提供了JS的验证方式:

验证显示

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

输入框提示信息
验证通过提示
输入框提示信息
验证失败提示

提示样式

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

验证通过提示
验证失败提示
    <form class="form form-x validate-tips">
      ......
    </form>
  

验证方法

    <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验证失败提示,在有布尔验证比较验证时有效,设置后可显示提示文本,无文本提示时不设置;

类别示例说明
valid"valid":"校验通过"校验成功提示信息。
invalid"invalid":"校验不通过"校验失败提示信息。

布尔验证

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

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

类别示例说明
required"required":true必填,内容不能为空。
chinese"chinese":true要求输入值为中文
english"english":true要求输入值为英文
number"number":true要求输入值为数字
username"username":true要求输入值为英文字母开头的字母、下划线、数字
password"password":true要求输入的密码必须包含字母、数字、特殊字符三种且长度至少8位。
integer"integer":true要求输入值为整数(正整数或负整数,0)
plusinteger"plusinteger":true要求输入值为正整数
double"double":true要求输入值为正负小数
plusdouble"plusdouble":true要求输入值为正小数
mobile"mobile":true要求输入值为手机号码,号码段为:1(3|4|5|6|7|8|9)开头的中国大陆手机号。
phone"phone":true要求输入值为固定电话,格式包含:10000 或 66668888 或 010-6660888 或 0688-66608888-6688
tel"tel":true要求输入值为固定电话或手机
email"email":true要求输入值为邮件
url"url":true要求输入值为网址
ip"ip":true要求输入值为IPv4地址
currency"currency":true要求输入值为货币值
zip"zip":true要求输入值为邮编
idcard"idcard":true要求输入值为中国大陆身份证号码
qq"qq":true要求输入值为QQ号
radio"radio":true要求单选框必须选择一个值

比较验证

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

参数 比较方式 示例 说明
compare 等于:==
大于:>
大于等于:>=
小于:<
小于等于:<=
"compare":"==10"
"compare":">=10"
"compare":"<10"
数值比较,当前值与比较值的验证
length 等于:==
大于:>
大于等于:>=
小于:<
小于等于:<=
"length":"==10"
"length":">10"
"length":"<=10"
当前字符长度与比较字符长度的验证
equal "equal":"yes" 用于字符串,当前值为yes时才通过验证
least 可选值名称 "least":"mobile,phone,email" 手机、电话、邮箱至少一项不为空,多个name用英文,逗号分隔。
pattern 正则表达式 "pattern":"^1(3|4|5|6|7|8|9)\d{9}$" 输入值符合正则表达式规,如示例要求输入手机号码
repeat 对比值的名称 "repeat":"password" 输入值与对比名称(如password)值是否相同
file 文件 "file":{"ext":"jpeg,jpg,png,gif","size":"<1024","type":"image"} 文件验证为json内容,其中ext为允许的文件后续;size为文件大小最大值,单位为KB;type为类型,值为file|image,此属性专门为上传美化样式而处理。
ajax 异步验证 "ajax":{"url":"/2.0/data/validate-ajax.html","data":"mobile"} 输入值ajax验证,返回数据为JSON格式,当返回"error":0则符合,其他则不通过;如验证通过{"error":0,"msg":"校验成功"},验证不通过{"error":1,"msg":"校验失败"}
在验证时,除了传递自身的值外,也可能需要传递其他参数值,则添加参数"data":"mobile,email",多个参数名称name用英文,逗号分隔。
当返回msg值时,提示显示msg的内容。
同时还可以针对结果调用函数处理数据,方法为下文的“提交参数”内容中介绍。

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

提交参数

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

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

参数类型默认值说明
validstring/验证通过时通用提示信息,当无自定义的valid时显示
toggleobject/提交按钮的对象,如#id.class
confirmjson/弹出确认框参数,json格式,详细查看对话框
asyncboolfalse是否异步提交,true时则异步
ajax_namefunction/name为输入框名称,如示例中的email,即为name="email"执行验证类型为ajax时执行的函数,同时返回JSON格式的异步数据data值;
onsubmitfunction/正在提交时执行的函数
successfunction/异步提交成功时执行的函数,同时返回JSON格式的异步数据data值。

使用方法为

    <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>