资讯专栏INFORMATION COLUMN

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

张利勇 / 1398人阅读

摘要:表单地址值为,规定向何处发送表单数据。回车键会触发表单。请求方式规定请求方式,默认为可选。验证如果使用该属性,则提交表单时不进行验证。自定义表单验证默认情况下,如果验证失败,表单则不会提交。是一个原生组件,不限制于框架,可直接使用。

原生form表单

form表单元素大家可能都用到过,除了可以提交表单外,还有一些内置的表单校验,比如requireminlengthmaxlength,还有各种类型的input,比如type=email可以校验是否是邮箱类型,如果不满足还可以使用pattern进行正则校验。

原生的表单验证大概如下

虽然丑陋,功能却很强大,基本可以满足一般的需求,不过ui终究过于原生,而且也不方便自定义,所以很多情况下这种默认的表单验证并不使用。

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

结构基本和原生类似,也不需要额外的js逻辑

可以说丑小鸭立马变成白天鹅了。

xy-form

xy-formxy-ui新增了一类组件,主要用于表单提交和表单验证,完全可以取代原生form表单,下面简单介绍一下主要属性和方法,建议阅读在线文档,可以实时交互。

使用方式

使用方式很简单

npm

npm i xy-ui

cdn





或者直接从github拷贝源码。



使用


    ...
表单默认行为 属性

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

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

表单地址action

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

回车键会触发表单。

请求方式method

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

验证novalidate

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

方法

提交submit

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

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

清空reset

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

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

下面是一个最账号密码的登录框


    
        
    
    
        
    
    
        login
        reset
    

渲染如下

首先输入框均设置了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-inputxy-checkboxxy-radio等等均未提及,可参考文档,有了这些组件,可以很轻松的完成表单校验,如文章开所示。

xy-form是一个原生web组件,不限制于框架,可直接使用。如果想使用其他类似的组件,可关注xy-ui,汇集了其他各类常见交互组件,欢迎star~。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110002.html

相关文章

  • angular6的响应式表单

    摘要:在模块里面引入要使用响应式表单,就要从包中导入,并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1:在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单,就要从@angular/forms包中导入ReactiveFormsModule,并把它添加到你的N...

    alogy 评论0 收藏0
  • angular6的响应式表单

    摘要:在模块里面引入要使用响应式表单,就要从包中导入,并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1:在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单,就要从@angular/forms包中导入ReactiveFormsModule,并把它添加到你的N...

    hzc 评论0 收藏0
  • angular6的响应式表单

    摘要:在模块里面引入要使用响应式表单,就要从包中导入,并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1:在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单,就要从@angular/forms包中导入ReactiveFormsModule,并把它添加到你的N...

    MycLambert 评论0 收藏0
  • 前端框架快速开发静态页面

    摘要:框架开发解放了生产力,让一个静态页面效果更逼真,也让用户体验逐渐上去,但是目前对网站的需求主要还是为了展示和宣传一些东西,反观教育机构和政府部门的网站都是偏动画少,体现了公关的严肃性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言 最近很久没有写文章,不忙也忙的生活节奏,博客...

    李世赞 评论0 收藏0
  • 前端框架快速开发静态页面

    摘要:框架开发解放了生产力,让一个静态页面效果更逼真,也让用户体验逐渐上去,但是目前对网站的需求主要还是为了展示和宣传一些东西,反观教育机构和政府部门的网站都是偏动画少,体现了公关的严肃性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言 最近很久没有写文章,不忙也忙的生活节奏,博客...

    wenzi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<