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插件的正则有关文件 * 引入 ...
随机推荐
- 「雅礼集训 2018 Day10」贪玩蓝月
题目链接 题意分析 我们考虑维护两个栈 分别支持左边的插入删除以及右边的插入删除 然后对于两两个栈的我们需要用背包求出最优答案 注意 删除时如果不够的话 我们需要从另一个栈中取出一半加入另一个栈中 注 ...
- python web开发学习笔记一:javascript基础
一.认识js: 能进入到软件所实习是我的最大的收获,也是我的荣幸,我相信努力付出一定能够换回收获. 项目最先开始的是接触到web前端的一些内容,我们需要利用flask搭建应该有的框架.我有一些pyth ...
- hibernate与Oracle
今天在用hibernate连接Oracle数据库进行查询时,出现一点小状况 数据库中是有数据的,而且程序本身也没有问题,可就是查不出数据,在经过几个小时的查找下,中遇找到了问题所在,那就是我Oracl ...
- git配置教程
一.配置ssh 1.检查本机是否有ssh key设置 如果没有则提示: No such file or directory 如果有则进入~/.ssh路径下(ls查看当前路径文件,rm删除所有文件) 2 ...
- mac下配置influxdb
influxdb 基本概念 参考:https://docs.influxdata.com/influxdb/v1.4/concepts/key_concepts 基本概念图: Database(绿色白 ...
- 8. JavaScript学习笔记——事件
8. 事件 8.1 事件基础 /// 事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器) ...
- 不支持这个操作系统WNT_6.3I_64
安装winserver2012驱动时,经常会因为版本的关系,出现向后兼容问题: 编辑驱动安装配置ini, 添加向后兼容的标识即可:WNT_6.3I_64= Win81_64 删除system下的程序( ...
- 搭建类似生产环境的RAC
install the necessary packages yum install -y 创建组.用户和目录 创建用户组 groupadd -g 2000 oinstallgroupadd -g 2 ...
- 自定义 checkbox 样式
前言:最近在做一个网站,为了统一风格,需要自定义checkbox的样式.所以花了点时间参考了 研究了一下.感觉上面的方法略微麻烦.所以自己重新写了下面的代码,欢迎大家指教.同时,感谢w3cplus提供 ...
- Jmeter之测试报告
当我们完成测试后,需要通过报告来查看测试结果 一.聚合报告 Label:每个JMeter的element的Name值.例如HTTP Request的Name #Samples:发出请求数量.例如:如第 ...