Skip to content

Latest commit

 

History

History
355 lines (293 loc) · 11.3 KB

xy-form.md

File metadata and controls

355 lines (293 loc) · 11.3 KB
Raw

xy-form

表单。基于HTML5规范的表单验证交互组件。

使用方式

<!-- 引入 -->
<script type="module">
    import './node_modules/xy-ui/components/xy-form.js';
</script>
<!-- 使用 -->
<xy-form action="/login" method="post">
    <xy-form-item legend="user">
        <xy-input name="user" required placeholder="user"></xy-input>
    </xy-form-item>
    <xy-form-item>
        <xy-button type="primary" htmltype="submit">submit</xy-button>
        <xy-button htmltype="reset">reset</xy-button>
    </xy-form-item>
</xy-form>

需配合表单组件，比如xy-input、xy-checkbox等等。

表单元素通过name属性作为标识，存在name属性则被认定为表单元素，所有的校验均依赖于此。

表单域xy-form-item

xy-form-item可以实现表单两栏布局，legend属性规定了左侧文本域。

如果内部有表单元素有required属性，那么文本域会出现*符号。

<xy-form>
    <xy-form-item legend="user">
        <xy-input name="user" placeholder="user"></xy-input>
    </xy-form-item>
    <xy-form-item legend="password">
        <xy-input name="password" required type="password" placeholder="password"></xy-input>
    </xy-form-item>
</xy-form>

该组件仅仅是对常用表单布局的简单封装，如果不满足布局要求，可以采用普通的布局，比如Flex、Grid，更加灵活。

表单风格type

可以设置表单的风格样式，可选normal（默认）、full、none

  • normal 默认风格，配合xy-form-item可实现两栏布局
  • full 通栏风格，配合xy-form-item可实现通栏布局
  • none 无风格，需自定义布局
normal full none login reset 
<xy-form type="full">
    ...
</xy-form>

纯CSS修改(属性选择器)

表单默认行为

xy-form内置了以下属性，基于html5规范。

这里的默认行为指的是，点击submit按钮或者回车，表单首先对表单元素进行格式校验，如果有误则会将有误的地方标识出来，全部正确后才能进行提交。

属性

  • 表单地址action

值为URL，规定向何处发送表单数据。

回车键会触发表单。

  • 请求方式method

规定请求方式，默认为get,可选post。

  • 验证novalidate

如果使用该属性，则提交表单时不进行验证。

<xy-form action="/login" method="post" novalidate>
    <xy-form-item legend="user">
        <xy-input name="user" placeholder="user"></xy-input>
    </xy-form-item>
    <xy-form-item legend="password">
        <xy-input name="password" required type="password" placeholder="password"></xy-input>
    </xy-form-item>
</xy-form>

该状态下即使格式有误仍然可以提交，可用form.validity获取验证合法性。

方法

  • 提交submit

当表单内包含htmltype="submit"的按钮时，点击该按钮可以触发表单提交。

可通过form.submit()主动触发。

  • 清空reset

当表单内包含htmltype="reset"的按钮时，点击该按钮可以清空表单。

可通过form.reset()主动触发。

submit reset 
<xy-form action="/login" method="post">
    <xy-form-item legend="user">
        <xy-input name="user" required placeholder="user"></xy-input>
    </xy-form-item>
    <xy-form-item legend="password">
        <xy-input name="password" required type="password" placeholder="password" minlength="6"></xy-input>
    </xy-form-item>
    <xy-form-item>
        <xy-button type="primary" htmltype="submit">login</xy-button>
        <xy-button htmltype="reset">reset</xy-button>
    </xy-form-item>
</xy-form>

可在控制台查看提交的表单数据，格式为formData，可转换json。

当表单提交完成，如果返回数据格式为application/json，可触发submit回调

form.onsubmit = function(data){
    console.log(data)
    //后端返回的数据
}
form.addEventListener('submit',function(data){
    console.log(data)
    //后端返回的数据
})

自定义表单

自定义表单提交

当表单带有action属性时，回车键可以触发表单提交，如果包含htmltype="submit"的按钮时，点击该按钮可以触发表单提交。

如果想手动通过ajax提交，可以去除action属性，这样就不会触发默认表单提交效果了。

可通过form.formdata获取表单的值。

<xy-form>
    ...
</xy-form>
sumbitBtn.onclick = function(){
    //form.formdata（默认为formdata格式数据）
    //form.formdata.json（json格式数据）
    fetch('/login', {
        method: 'POST',
        body: form.formdata,
        
    })
    .then(function(data){
        //
    })
}

自定义表单验证

默认情况下，如果验证失败，表单则不会提交。

可以通过表单的form.checkValidity()方法手动校验所有表单元素，也可通过form.validity获取验证合法性。

login 
sumbitBtn.onclick = function(){
    if(form.checkValidity()){
        //全部验证通过
        XyDialog.success({
            title:"全部验证通过",
            content:JSON.stringify(form.formdata.json)
        })
    }
}

交互实例

下面表单采用组件默认验证交互，即点击submit按钮后开启即时验证，所有有误内容标红，但是提示tips只会出现在第1个表单上。

wuhan beijin shanghai React Vue Angular Flutter Swift Html Css Javascript Php Dart I have read this book submit reset 
<xy-form action="/login" method="post" id="form-submit">
    <xy-form-item legend="user">
        <xy-input name="user" required placeholder="user"></xy-input>
    </xy-form-item>
    <xy-form-item legend="password">
        <xy-input name="password" id="pwd" required type="password" placeholder="password" minlength="6"></xy-input>
    </xy-form-item>
    <xy-form-item legend="password again">
        <xy-input name="password_confirm" id="pwdAgain" required type="password" placeholder="password confirm"></xy-input>
    </xy-form-item>
    <xy-form-item legend="city">
        <xy-select name="city" required>
            <xy-option value="wuhan">wuhan</xy-option>
            <xy-option value="beijin">beijin</xy-option>
            <xy-option value="shanghai">shanghai</xy-option>
        </xy-select>
    </xy-form-item>
    <xy-form-item legend="books">
        <xy-checkbox-group name="books" required min="2" max="3" defaultvalue="React,Angular">
            <xy-checkbox>React</xy-checkbox>
            <xy-checkbox>Vue</xy-checkbox>
            <xy-checkbox>Angular</xy-checkbox>
            <xy-checkbox>Flutter</xy-checkbox>
            <xy-checkbox>Swift</xy-checkbox>
        </xy-checkbox-group>
    </xy-form-item>
    <xy-form-item legend="lang">
        <xy-radio-group name="lan" required>
            <xy-radio>Html</xy-radio>
            <xy-radio>Css</xy-radio>
            <xy-radio>Javascript</xy-radio>
            <xy-radio>Php</xy-radio>
            <xy-radio>Dart</xy-radio>
        </xy-radio-group>
    </xy-form-item>
    <xy-form-item>
        <xy-checkbox name="read" required value="read">I have read this book</xy-checkbox>
    </xy-form-item>
    <xy-form-item>
        <xy-button type="primary" htmltype="submit" onclick="formSubmit()">submit</xy-button>
        <xy-button htmltype="reset">reset</xy-button>
    </xy-form-item>
</xy-form>

针对确认密码的校验

document.getElementById('pwdAgain').customValidity = {
    method:(el)=>{
        return el.value == document.getElementById('pwd').value;
    },
    tips:'前后密码不一致'
}