最近学习了一个新的关于前端正则验证的插件,‘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. 「雅礼集训 2018 Day10」贪玩蓝月

    题目链接 题意分析 我们考虑维护两个栈 分别支持左边的插入删除以及右边的插入删除 然后对于两两个栈的我们需要用背包求出最优答案 注意 删除时如果不够的话 我们需要从另一个栈中取出一半加入另一个栈中 注 ...

  2. python web开发学习笔记一:javascript基础

    一.认识js: 能进入到软件所实习是我的最大的收获,也是我的荣幸,我相信努力付出一定能够换回收获. 项目最先开始的是接触到web前端的一些内容,我们需要利用flask搭建应该有的框架.我有一些pyth ...

  3. hibernate与Oracle

    今天在用hibernate连接Oracle数据库进行查询时,出现一点小状况 数据库中是有数据的,而且程序本身也没有问题,可就是查不出数据,在经过几个小时的查找下,中遇找到了问题所在,那就是我Oracl ...

  4. git配置教程

    一.配置ssh 1.检查本机是否有ssh key设置 如果没有则提示: No such file or directory 如果有则进入~/.ssh路径下(ls查看当前路径文件,rm删除所有文件) 2 ...

  5. mac下配置influxdb

    influxdb 基本概念 参考:https://docs.influxdata.com/influxdb/v1.4/concepts/key_concepts 基本概念图: Database(绿色白 ...

  6. 8. JavaScript学习笔记——事件

    8. 事件 8.1 事件基础 /// 事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器) ...

  7. 不支持这个操作系统WNT_6.3I_64

    安装winserver2012驱动时,经常会因为版本的关系,出现向后兼容问题: 编辑驱动安装配置ini, 添加向后兼容的标识即可:WNT_6.3I_64= Win81_64 删除system下的程序( ...

  8. 搭建类似生产环境的RAC

    install the necessary packages yum install -y 创建组.用户和目录 创建用户组 groupadd -g 2000 oinstallgroupadd -g 2 ...

  9. 自定义 checkbox 样式

    前言:最近在做一个网站,为了统一风格,需要自定义checkbox的样式.所以花了点时间参考了 研究了一下.感觉上面的方法略微麻烦.所以自己重新写了下面的代码,欢迎大家指教.同时,感谢w3cplus提供 ...

  10. Jmeter之测试报告

    当我们完成测试后,需要通过报告来查看测试结果 一.聚合报告 Label:每个JMeter的element的Name值.例如HTTP Request的Name #Samples:发出请求数量.例如:如第 ...