H5前端正则验证插件
最近学习了一个新的关于前端正则验证的插件,‘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前端正则验证插件的更多相关文章
- 值得H5前端学习的60个JS插件(含DEMO演示)
下面也可以说是H5前端学习的js插件大全.基本包含了大部分的前端最前沿的js插件和库. 布局 SuperEmbed.js- 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式 ...
- 第一百八十三节,jQuery-UI,知问前端--验证插件
jQuery-UI,知问前端--验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(va ...
- 前端tab切换 和 validatejs表单验证插件
一.tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 前端编程提高之旅(十)----表单验证插件与cookie插件
实际项目开发中与用户交互的常见手法就是採用表单的形式.取得用户注冊.登录等信息.而当用户注冊或登录后又须要记住用户的登录状态.这就涉及到经常使用的两个操作:表单验证与cookie增删查找. ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据.假数据.有毒数据的第一步,是数据安全的第一道关卡,虽然我们不能100%相信客户端提交的数据(真正的校验还得在服务端进行),但设置前端表单校验也是至关重要的,自己写逻辑 ...
- nice-validator表单验证插件
nice-validator表单验证插件的简单使用 前言 前端表单校验是过滤无效数据.假数据.有毒数据的第一步,是数据安全的第一道关卡,虽然我们不能100%相信客户端提交的数据(真正的校验还得在服务端 ...
- H5: 表单验证失败的提示语
前言 前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆js来检查. 但是自从H5出现后, 很多常见的表达验证, 它都已经帮我们实现了, 让我 ...
- 表单验证插件 - formValidator
表单验证插件 - formValidator * 引入formValidator插件文件 * 引入formValidator插件的主文件 * 引入formValidator插件的正则有关文件 * 引入 ...
随机推荐
- 使用Chrome-headless模式下,截屏不全屏的问题
在headless模式下,是没有打开浏览器窗口的,那么driver.maximize_window(),找不到目标也打不开. 我们可以换一种方式,去在无头模式下,指定浏览器的窗口大小运行即可. __o ...
- linux 编译PHP memcache扩展
在Linux下编译memcache:memcache官网:http://memcached.org/前期准备:如果是虚拟机 保证虚拟机 联网安装依赖包yum -y install gcc make l ...
- 【算法笔记】A1063 Set Similarity
1063 Set Similarity (25 分) Given two sets of integers, the similarity of the sets is defined to be ...
- win8.1中向IIS注册asp.net
以前都是用aspnet_regiis -I 命令向IIS注册asp.net ,今天换了win8.1后竟然发现这招不好使了. 根据提示,需要用dism.exe来完成注册. 折腾一会儿后,问题最终解决: ...
- java容器类1:Collection,List,ArrayList,LinkedList深入解读
1. Iterable 与 Iterator Iterable 是个接口,实现此接口使集合对象可以通过迭代器遍历自身元素. public interface Iterable<T> 修饰符 ...
- DIV盒子介绍
1.盒子模型=网页布局的基石,由四部分组成: 边框(border).外边距(margin).内边距(padding).盒子中的内容(content) 2.设置顺序是顺时针:上.右.下.左. 三个值(上 ...
- redis有序集合类型sort set
redis的数据类型之-有序集合 sort set和set类型一样,也是string类型元素的集合,也没有重复的元素,不同的是sort set每个元素都会关联一个权,通过权值可以有序的获取集合中的元素 ...
- python-thread多线程
#!/usr/bin/python import threading,time def Music(): print "music is playing" time.sleep(3 ...
- angular2自学笔记(三)---ng2选项卡
学习了这些概念就能简单的描述一个选项功能的选项卡按钮: 数据:1.数组:实例化一个数组的类,如果想要使用这个类中的数据,需要在组件中 使用一个公共属性来暴漏这个类如 heroes=HEROES;con ...
- 手把手教你使用 VuePress 搭建个人博客
手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...