最近学习了一个新的关于前端正则验证的插件,‘jQuery.validate.js ’ 要用这个插件 首先得有插件,下载jquery.validate.min.js 和jq文件并引入。

我把它简单的通俗的分为两部分

1.要验证的是谁

2.验证的提示信息

具体格式如下

$("id名").validate({

// 要验证的谁  rules:{

},

//验证提示信息 messages{

}

});

基本的格式就是这样   下边我会用代码具体的说下这个插件。

一般的情况下是用来表单的   我们也就拿表单举例子吧。

我们先写一个表单

<form id="myOform">

//用p标签抱起来我们的label标签

<p>

<label for="user">username:</label>  //用户名
              <input type="text" name="username" id="user"/>

</p>

<p>

<label for="user">username:</label>  //密码
              <input type="text" name="username" id="user"/>

</p>

<p>

<input type="submit" name="submit" id="submit"/>  //提交按钮

</p>

</form>

验证的语法要写在script里

<script>

$(function(){

$("#myOform").validate({

rules:{

username:{     //注意!这个名是input的 name 的名称属性。

required:tred,  //必填

rangelength:[8,13] //字符的长度 最小为8 最大为13

}

},

messages:{

username:{

required:'此项必填’,   // 默认提醒的是英文 可以改成汉字

rangelength:'最长为13最短为8'  //提示信息

}

}

});

});

</script>

当然还有其他的提示信息

这是验证各种信息的的表单  如果有需要就可以使用.

当然 还有很多,这只是最简单的  希望我们一起进步。

H5前端正则验证插件的更多相关文章

  1. 值得H5前端学习的60个JS插件(含DEMO演示)

    下面也可以说是H5前端学习的js插件大全.基本包含了大部分的前端最前沿的js插件和库. 布局 SuperEmbed.js- 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式 ...

  2. 第一百八十三节,jQuery-UI,知问前端--验证插件

    jQuery-UI,知问前端--验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(va ...

  3. 前端tab切换 和 validatejs表单验证插件

    一.tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 前端编程提高之旅(十)----表单验证插件与cookie插件

        实际项目开发中与用户交互的常见手法就是採用表单的形式.取得用户注冊.登录等信息.而当用户注冊或登录后又须要记住用户的登录状态.这就涉及到经常使用的两个操作:表单验证与cookie增删查找.   ...

  5. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  6. nice-validator表单验证插件的简单使用

    前言 前端表单校验是过滤无效数据.假数据.有毒数据的第一步,是数据安全的第一道关卡,虽然我们不能100%相信客户端提交的数据(真正的校验还得在服务端进行),但设置前端表单校验也是至关重要的,自己写逻辑 ...

  7. nice-validator表单验证插件

    nice-validator表单验证插件的简单使用 前言 前端表单校验是过滤无效数据.假数据.有毒数据的第一步,是数据安全的第一道关卡,虽然我们不能100%相信客户端提交的数据(真正的校验还得在服务端 ...

  8. H5: 表单验证失败的提示语

    前言     前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆js来检查. 但是自从H5出现后, 很多常见的表达验证, 它都已经帮我们实现了, 让我 ...

  9. 表单验证插件 - formValidator

    表单验证插件 - formValidator * 引入formValidator插件文件 * 引入formValidator插件的主文件 * 引入formValidator插件的正则有关文件 * 引入 ...

随机推荐

  1. 本地搭建sass运行环境

    1.安装node.js 安装文件为msi文件,可到node.js官网下载安装包,下载路径为:https://nodejs.org/en/download/ 安装路径为默认路径,安装完成之后配置环境变量 ...

  2. POJ_3470 Walls 【离散化+扫描线+线段树】

    一.题面 POJ3470 二.分析 POJ感觉是真的老了. 这题需要一些预备知识:扫描线,离散化,线段树.线段树是解题的关键,因为这里充分利用了线段树区间修改的高效性,再加上一个单点查询. 为什么需要 ...

  3. 通过js获取内网ip和外网ip的简单方法 ...

    今天遇到了一个需求,需要获取用户当前的内网ip, 找了半天终于找到了方法,遂将找到的方法记录下来,留给需要的人. 1,获取内网ip function getIP(callback) { let rec ...

  4. nRF51822EK_PRO

    ARMCC5LIB = C:\Keil\ARM\ARMCC\lib dd if=/dev/zero of=tmp.500M bs=500M count=1 Developer Home

  5. python3.6.4没有raw_input

    之前是一直在用Python2.7版本,2.7里面raw_input()和input个人认为区别在于raw_input()可以输入字符串和中文,而input()只接受数字,输入字符串就会报错. 现在用的 ...

  6. 剑指offer——面试题32.1:分行从上到下打印二叉树

    void BFSLayer(BinaryTreeNode* pRoot) { if(pRoot==nullptr) return; queue<BinaryTreeNode*> pNode ...

  7. SpringSecurity自定义用户登录

    根据上一节的配置,默认在服务开启的时候会被要求自动的进行表单登陆.用到的用户名只能是一个固定的用户名user,它的密码是每次启动的时候服务器自动生成的.最常见的场景是我们的用户是从数据库中获取的. 1 ...

  8. JS检测数据类型

    如果你要判断的是基本数据类型或JavaScript内置对象,使用toString: 如果要判断的时自定义类型,请使用instanceof. 1.typeof typeof操作符返回的是类型字符串,它的 ...

  9. graphql pass arg

    ; ; var xhr = new XMLHttpRequest(); xhr.responseType = 'json'; xhr.open("POST", "http ...

  10. EntityFrameworkCode 操作MySql 相关问题

    近段时间,由于工作原因,使用到了EntityFrameworkCore 操作MySql数据库,使用中遇到一些问题,特此记录 系统环境 Win10 1805,VS 2017,Framework:Asp. ...