mip-form 表单

编辑

表单提交。

标题内容
类型通用
支持布局responsive, fixed-height, fill, container, fixed
所需脚本https://c.mipcdn.com/static/v1/mip-form/mip-form.js

示例

基本使用

预览
<mip-form method="get" url="https://www.mipengine.org?we=123">
    <input type="text" name="username" validatetarget="username" validatetype="must" placeholder="姓名">
    <div target="username">姓名不能为空</div>
    <input type="number" name="age" validatetarget="age" validatetype="must" placeholder="年龄">
    <div target="age">年龄不能为空</div>
    <input type="submit" value="提交">
</mip-form>

加清空按钮

预览
<mip-form method="get" url="https://www.mipengine.org" clear>
    <input type="text" name="username2" validatetarget="username2" validatetype="must" placeholder="姓名">
    <div target="username2">姓名不能为空</div>
    <input type="number" name="age2" validatetarget="age2" validatetype="must" placeholder="年龄">
    <div target="age2">年龄不能为空</div>
    <input type="submit" value="提交">
</mip-form>

自定义验证规则

预览
<mip-form method="get" url="https://www.mipengine.org">
     <input type="text" name="customnumber" validatetarget="custom" validatetype="custom" validatereg="^[0-9]*$" placeholder="我是自定义验证规则数字">
     <div class="mip-form-target" target="custom">请输入正确的数字</div>
     <input type="submit" value="提交">
 </mip-form>

页面数据刷新

预览
<mip-form fetch-url="http://yourdomain.com/path">
    <input type="text" name="name" placeholder="姓名">
    <div submit-success>
        <template type="mip-mustache">
            Success! Thanks for {{name}} trying the mip demo.
        </template>
    </div>
    <div submit-error>
        <template type="mip-mustache">
            Error!.
        </template>
    </div>
    <input type="submit" value="提交">
 </mip-form>

属性

method

说明:表单提交方法
必选项:是

url

说明:表单提交 URL,建议填写 HTTPS 地址
必选项: 是

validatetarget

说明: 验证提示对应 tag,用于对应错误时的提示显示元素的查找
必选项:否

validatetype

说明:验证类型, 用于支持简单的验证。目前提供 email, phone, idcar, custom。当为 custom 时则需要填写 validatereg
必选项:否

validatereg

说明: 自定义验证,补充站长个性化的验证规则。如果 validatetypecustom 时需填写相应验证规则
必选项:否

clear

说明: 表单中 <input> 清空按钮开关

fetch-url

说明: 有此属性则可以开启异步请求数据逻辑,组件会并根据数据返回状态来按submit-successsubmit-error块中的模板刷新局部信息。 需要注意的几个点:

  • 方法支持。
  • 请求结果请返回 JSON 对象。
  • 数据状态只有在成功(2xx)的时候触发 submit-success 的逻辑,其他的均触发 submit-error 逻辑。

必选项:否

注意事项

  1. 表单提交方法如果为 post,应使用 HTTPS 地址。避免 MIP-Cache HTTPS 环境提交到 HTTP,导致浏览器报错。
  2. 使用 fetch 功能时,请求使用 cors 时不能配置为 *。