资讯专栏INFORMATION COLUMN

原创validate信息验证控件,简单易用

jsbintask / 1791人阅读

摘要:更新源码开源代码已在上,点击上面的源码查看为了方便使用,现更新版本,主要变更如下代码不用自己设置太多错误信息提示一律显示在验证框下面,以红色字体标出错误信息可以自己设置,也可以设置为空,为空时显示默认提示页面需要给添加,给添加一些属性,下面

更新validate version1.1 源码

(开源代码已在github上,点击上面的源码查看)

为了方便使用,现更新版本,主要变更如下

JS代码不用自己设置太多

错误信息提示一律显示在验证框下面,以红色字体标出

错误信息可以自己设置,也可以设置为空,为空时显示默认提示

html页面需要给form添加ID,给INPUT添加一些属性,INPUT下面添加标签label。详情如下:

使用时需要注意:

JS代码部分需要注意:

只需要new validate("formid"),传一个form的ID给我就足够了

HTML代码部分需要注意:

HTML页面相应FORM下,你要告诉我四个信息包括id="info" validate="true" validateInfo="{"type":"number"};{"type":"email"}" error_message=""

validate=""或者"false"或者没有该属性时,其他的信息均可不用设置

设置了validate="true"时,其他三个属性必须,但可以设置为空,比如error_message="",此时输入有误时显示的信息将是我设置的默认值

需要验证的input框下面需要添加一个标签,用于显示错误提示信息

    

version2 validate

随意组合,目前总共分为以下几个规则
用户名:

密码 :

不能为空:

数值不能小于10:

数值最大不能超过100:

数字:

汉字:

Email:

是不是很简单,有疑问欢迎留言
想要使用的同学,请注明版权@Ipo
转发请注明版权@Ipo
vue 新手中文社区群: 320905222

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

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

相关文章

  • angular4 学习记录 -- 表单

    摘要:在表单上添加的会拦截标准的表单提交事件。并为它们提供了一些共同的行为和属性,其中有些是可观察对象。用于跟踪一个单独的表单控件的值和有效性状态。组件中的顶级表单就是一个。在表单所在的中的上添加,再在指定的验证方法中调用来显示验证失败信息。 angular4 表单 模板表单 在app.module中导入FormsModule之后,项目中的form表单都会是一个ngForm,也就是一个模板表...

    james 评论0 收藏0
  • 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    摘要:写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单,指定一个,指定其验证规则。调用提交表单方法,可以获取验证成功后的数据。 写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则。 调用提交表单方法,可以获取验证成功后的数据。 调用重置表单方法重置表单 自...

    ISherry 评论0 收藏0
  • 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    摘要:写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单,指定一个,指定其验证规则。调用提交表单方法,可以获取验证成功后的数据。 写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则。 调用提交表单方法,可以获取验证成功后的数据。 调用重置表单方法重置表单 自...

    keke 评论0 收藏0
  • 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)

    摘要:写一个表单验证插件需求目标简单易用可扩展如何简单开发者要做的写了一个表单,指定一个,指定其验证规则。调用提交表单方法,可以获取验证成功后的数据。 写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则。 调用提交表单方法,可以获取验证成功后的数据。 调用重置表单方法重置表单 自...

    ccj659 评论0 收藏0

发表评论

0条评论

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