基于原生JS验证表单组件：xy-form

原生form表单

form表单元素你们可能都用到过，除了能够提交表单外，还有一些内置的表单校验，好比require、minlength、maxlength，还有各类类型的input，好比type=email能够校验是不是邮箱类型，若是不知足还可使用pattern进行正则校验。

原生的表单验证大概以下

虽然丑陋，功能却很强大，基本能够知足通常的需求，不过ui终究过于原生，并且也不方便自定义，因此不少状况下这种默认的表单验证并不使用。

下面来看看xy-form下的效果

结构基本和原生相似，也不须要额外的js逻辑

能够说丑小鸭立马变成白天鹅了。

xy-form

xy-form是xy-ui新增了一类组件，主要用于表单提交和表单验证，彻底能够取代原生form表单，下面简单介绍一下主要属性和方法，建议阅读在线文档，能够实时交互。

使用方式

使用方式很简单

• npm

npm i xy-ui

• cdn

<script type="module" src="https://unpkg.com/xy-ui/components/xy-form.js"></script>

<!--或者-->

<script type="module">
    import 'https://unpkg.com/xy-ui/components/xy-form.js'
</script>

• 或者直接从github拷贝源码。

<script type="module" src='./node_modules/xy-ui/components/xy-form.js'></script>
<!--或者-->
<script type="module">
    import './node_modules/xy-ui/components/xy-form.js';
</script>

使用

<xy-form>
    ...
</xy-form>

表单默认行为

属性

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

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

• 表单地址action

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

回车键会触发表单。

• 请求方式method

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

• 验证novalidate

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

方法

• 提交submit

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

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

• 清空reset

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

可经过form.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>

渲染以下

首先输入框均设置了required属性，表示必填项，若是不输入在submit时会提示如下信息

其次，密码框规定了minlength属性，表示最小字符长度，若是不知足格式，会提示如下信息

当所有知足要求才能进行提交，可在控制台查看提交的表单数据，格式为formData，可转换json。

自定义表单

自定义表单提交

当表单带有action属性时，回车键能够触发表单提交，若是包含htmltype="submit"的按钮时，点击该按钮能够触发表单提交。

若是想手动经过ajax提交，能够去除action属性，这样就不会触发默认表单提交效果了。

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

sumbitBtn.onclick = function(){
    fetch('/login', {
        method: 'POST',
        body: form.formdata,
    })
    .then(function(data){
        //
    })
}

自定义表单验证

默认状况下，若是验证失败，表单则不会提交。

能够经过表单的form.checkValidity()方法手动校验全部表单元素，也可经过form.validity获取验证合法性。

sumbitBtn.onclick = function(){
    if(form.checkValidity()){
        //所有验证经过
        XyDialog.success({
            title:"所有验证经过",
            content:JSON.stringify(form.formdata.json)
        })
    }
}

另外，xy-input能够自定义校验规则，好比确认重复密码

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

详情可参考xy-input的文档

其余

xy-form并非一个独立的组件，不少表单元素，如xy-input、xy-checkbox、xy-radio等等均未说起，可参考文档，有了这些组件，能够很轻松的完成表单校验，如文章开所示。

xy-form是一个原生web组件，不限制于框架，可直接使用。若是想使用其余相似的组件，可关注xy-ui，聚集了其余各种常见交互组件，欢迎star~。