`
流浪的我
  • 浏览: 34131 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

validfrom 表单验证的使用心得

 
阅读更多

首先引入 validform.js文件

html代码
      <form id="form">
       <input id="name" placeholder="请输入真实姓名" type="text" datatype="*" errormsg="请填写用户名">
       <input id="pass" placeholder="请输入密码" type="text" datatype="*" errormsg="请填写密码">
    </form>
初始化:
   $("#form").validform();
验证表单
   第一种直接绑定属性:datatypenullmsgsucmsgerrormsgignorerechecktipaltercssajaxurl 和 plugin
      内置基本的datatype类型有: * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url

                                                            *:检测是否有输入,可以输入任何字符,不留空即可通过验证;
                                                            *6-16:检测是否为6到16位任意字符;
                                                            n:数字类型;
                                                            n6-16:6到16位数字;
                                                           s:字符串类型;
                                                           s6-18:6到18位字符串;
               p:验证是否为邮政编码;
               m:手机号码格式;
               e:email格式;
               url:验证字符串是否为网址。

 添加错误信息:
    errormsg=“请填写正确的信息”
 第二种验证方法:
    $(function () {
        var  aihuinong = $("form").Validform();
           aihuinong.addRule([
              {
                  ele:"#name",  //绑定验证的块
                  datatype:"*",  //验证类型
                  nullmsg:"请填写名称",   //为空错误提示
                  errormsg:"请正确填写名称"   //填写错误提示
              },
              {
                  ele:"#pass",
                  datatype:"*",
                  nullmsg:"请填写密码",
                  errormsg:"请正确填写密码"
              }
           ])
       });

h5默热提示:直接在块中添加 required  就可以
官网连接:http://validform.rjboy.cn/document.html
分享到:
评论

相关推荐

    vue element el-form多表单验证.txt

    // 使用 Element UI 提供的 validate 方法进行表单验证 _self.$refs[formName].validate(valid =&gt; { if (valid) { // 如果表单验证通过,则调用 resolve resolve(); } else { // 如果表单验证失败,则调用 ...

    Vue表单验证插件Vue Validator使用方法详解

    Vue Validator是Vue.js框架的一个强大插件,专门用于处理表单验证。它的主要目标是简化在Vue应用中创建和管理复杂表单验证的过程。在本文中,我们将深入探讨Vue Validator的使用方法及其核心特性。 首先,为了使用...

    bootstrap风格的html5表单验证示例

    4. **Bootstrap表单验证状态**:Bootstrap还提供了表单验证状态样式,如`.has-error`(现在推荐使用`.is-invalid`),`.has-warning`和`.has-success`,这些类可以改变输入框、标签和帮助文本的样式,以反馈用户的...

    jQuery表单验证

    要使用jQuery表单验证,首先需要在页面中引入jQuery库和验证插件的JavaScript文件。然后,可以通过jQuery选择器找到需要验证的表单元素,并调用相关的验证方法,如`validate()`。 3. **规则设定** 在验证过程中,...

    jquery validate 表单验证

    以上就是jQuery Validate的基本使用和核心概念,通过熟练掌握这些,你可以轻松实现高效且用户友好的表单验证。记住,始终要关注用户体验,避免过于繁琐的验证过程,同时确保数据安全性和准确性。

    bootstrap表单验证

    5. **表单验证API**:BootstrapValidator插件通常会提供一系列API,例如`validate()`用于触发验证,`isValid()`用于检查整个表单或单个字段是否有效,以及`resetForm()`用于重置表单状态。 6. **自定义错误消息**:...

    表单验证的插件

    在IT领域,表单验证是Web开发中的一个关键部分,特别是在构建用户交互性强的网站或应用时。表单验证确保用户输入的数据符合预期格式和规则,从而提高用户体验并减少服务器端的压力。`jQuery`和`Bootstrap`是两个非常...

    ajax表单验证简单实现jquery版

    本文将深入探讨如何使用jQuery库来实现一个简单的Ajax表单验证。jQuery是一个轻量级、功能丰富的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。 首先,我们需要理解Ajax的核心概念。Ajax允许我们在后台与...

    超详细表单验证

    本篇文章将详细探讨如何进行“超详细表单验证”,特别是针对单选按钮和多选按钮的状态判断,以及使用JQuery进行表单验证的方法。 首先,单选按钮(radio)和多选按钮(checkbox)在网页表单中经常用于让用户从多个...

    Extjs验证表单 Extjs验证表单

    ### Extjs 表单验证详解 #### 一、引言 在现代Web开发中,确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架,提供了丰富的功能来帮助开发者轻松实现客户端验证。本文将深入探讨Extjs中的...

    AngularJS 学习笔记(表单验证篇)

    在AngularJS的学习过程中,表单验证是一个至关重要的环节,它能确保用户输入的数据符合预期的格式和规则,从而提高应用程序的稳定性和用户体验。本学习笔记将深入探讨AngularJS中的表单验证机制,主要包括以下几个...

    jQuery表单验证插件EasyValidator 2.0带TIP提示效果

    **jQuery表单验证插件EasyValidator 2.0:打造高效且友好的用户输入体验** 在Web开发中,表单验证是不可或缺的一部分,它确保了用户提交的数据符合预期的格式和标准,从而防止无效数据的输入。jQuery作为一款广泛...

    万能表单验证库

    在实际应用中,使用"万能表单验证库"能够显著提升表单验证的效率和质量,减少服务器负载,同时提升用户对网站或应用的信任度。通过熟练掌握这个库,开发者可以创建出更加健壮、用户友好的表单验证系统,满足各种复杂...

    好用的bootstrapvalidator表单验证

    BootstrapValidator是一款基于Bootstrap框架的强大的表单验证插件,它为开发者提供了丰富的验证规则和便捷的验证机制,使得创建复杂的Web表单变得轻而易举。这个插件通过优雅的UI设计和灵活的配置选项,使得表单验证...

    EXT 表单验证EXT 表单验证

    通过阅读如"EXT 表单验证_journeylin_新浪博客.html"、"ExtJS中表单验证使用自定义vtype示例 - 芒果奶茶的日志 - 网易博客.mht"和"Ext表单验证 - 天行健的日志 - 网易博客.mht"这样的资源,你可以深入理解EXT表单...

    Jquery.validate表单验证小结

    本文将深入探讨如何使用jQuery Validate插件进行表单验证,包括必要的资源文件、基本配置、验证规则及自定义消息等。 #### 二、资源文件与准备工作 为了使jQuery Validate插件正常工作,需要准备以下文件: 1. **...

    最简单的表单验证框架发布

    在网页开发中,表单验证是确保用户输入数据有效性和安全性的关键步骤。这个框架可能简化了常见的验证规则,使得开发者可以快速集成到自己的项目中。 描述中的“增加一个helloworld的演示”意味着提供了基础的示例...

    Python关于 Django 的web- Form 表单验证

    在Python的Web开发框架Django中,Form表单验证是一个至关重要的部分,它允许开发者创建用户界面并确保从用户那里接收到的数据是有效且安全的。Form类是Django提供的一个强大工具,用于处理HTTP请求中的数据,进行...

    移动端表单验证

    在移动端开发过程中,表单验证是一项至关重要的任务,它确保用户输入的数据符合应用程序的要求和预期。在MUI(一个基于HTML5和CSS3的移动框架)构建的移动端应用中,通常需要针对移动设备的特点进行定制化的表单验证...

    jquery表单验证

    对于表单验证,jQuery提供了一种高效且用户友好的解决方案,避免了提交无效数据到服务器的情况。本篇文章将深入探讨jQuery如何实现表单验证。 首先,我们需要了解表单验证的基本原理。在HTML中,我们可以通过设置`...

Global site tag (gtag.js) - Google Analytics