随着ajax异步传输的兴起,form表单的提交已逐渐使

单表单验证(sigleFormValidate)

随着ajax异步传输的兴起,form表单的提交已逐渐使用ajax异步提交,而在使用其他表单验证过程中,
form标签依然存在,而提交也使用的<input type='submit'>,这就很容易造成默认事件的冲突。
为此,个人弄了一个简单的表单验证,样式和配置都很灵活,适合小项目应用。(代码体积也是非常小,仅3.18k)

开始(start)

html引入js文件

<script src="sigleFormValidate.min.js"></script> 初始化(init)

<script> var sfv = new Sfv();//实例化对象 //if you want to add other validate options,you can add in between instance and init function! //如果您想添加自己的检验配置,直接配置在custom属性中,特别注意的是:配置必须在init初始化方法之前! // for example // 例子(配置详情请转下一节) sfv.custom = { "int": {defaultMsg: "该项只能为数字", reg: /^\d+$/},//数字 } sfv.init("#formList"); document.querySelector("#id").addEventListener("click", function () { //sfv.validate()方法返回一个Booleans,用于判断当前表单是否已经验证通过,验证通过后直接使用ajax传输数据。 if (sfv.validate()) { console.log("you can submit!") } }) </script> 配置(options)

sfv.custom是程序的配置属性,为一个对象。

{"int": {"defaultMsg": "该项只能为数字", "reg": /^\d+$/}}//数字

这项配置的主要意思是:

"int":表示需要验证的内容,您可以自定义名称,当然,这里定义的名称,在标签属性上就需要添加s-相同的名称,如:

<input type="text" s-int> "defaultMsg":表示默认提示内容,您也可以在标签上自定义

<input type="text" s-int s-int-msg="该项只能为数字"> "reg": 表示需要验证的正则表达式,需要自己配置,特别注意:需要写成 /^\d$/ 这种形式。 不要脸的话(tips)

插件集成不摇碧莲的特点,所以样式需要你自己来控制,毕竟每个人的审美不同,项目不懂,肯定样式也不同(当然,主要是因为我比较懒-_-*)
您可以直接通过控制s-err-msgclass来控制样式! 还有个秘密就是 ̄へ ̄,其实,源码真的非常简单,要添加其他验证方法完全ok!

最后的最后(last)

如果有问题,欢迎issue指正。
如果有幸帮到您,请赏我个小星星!

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。