jQuery:validate表单验证基本使用
jquery.validate是jquery的一个验证框架,可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法!
这里先从介绍简单的使用方法:jquery.validate.js下载地址
1、导入js库
js库+ jquery.validate.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
2、 验证表单:
<form action="" method="get" id="checkform">
姓名:<input type="text" name="name" required/>
邮箱:<input type="email" name="email" />
<input type="submit" value="提交" />
</form>
3、执行:
<script>
$("#commentForm").validate();
</script>
4、拓展验证:jquery.validate.js里面的message有什么验证内容type和name值改成相应的值,如:下面的date
<input id="new" type="date" name="date"/>
5、修改验证提示:引入messages_cn.js:
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
或不引入直接修改,如:
$("#checkform").validate({
messages: {
email: "请填写邮箱邮箱"
}
});
备:如果使用class="{}"的方式放正则,必须引入包:jquery.metadata.js,这里暂不演示
jQuery:validate表单验证基本使用的更多相关文章
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jQuery Validate 表单验证
在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交,我们可以通过自己编写JavasScript代码来验证,但是有时数据量过多时就会有些难度了.基于jQuery的jquery.valid ...
- jQuery Validate 表单验证插件----自定义一个验证方法
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...
随机推荐
- 连接数据库:ERROR:The server time zone value '?й???????' is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone configuration prop
本打算在maven项目中配置mybatis试试看,想到mybatis如果不是在容器中运行,那么他的事务控制实际上可以使用的是jdbc的提交和回滚,这就要在pom.xml文件中配置mysql-conne ...
- C#取色器
闲来无事,就写了一个取色器.原理其实很简单,只需要两步, 获取鼠标光标的位置, 获取当前鼠标光标的位置的RGB颜色值. 获取鼠标光标的位置: System.Drawing.Point p = Mous ...
- Django之管理权限
什么是权限: 谁对什么资源能做什么操作. 管理权限的实现有很多,这里实现一个最简单的管理权限的实现方式:rbac ( role based access control ) 实现的一个基本思路: ...
- Android项目包命名规则是怎样的?
com.example.app.activity | Activity 类com.example.app.widget | 自定义的小UIcom.example.app.db | 数据库相关操作com ...
- Linux的权限对于文件与目录的意义
权限对文件: r:可读取此文件的实际内容. w:可以编辑.新增或者是修改该文件的内容(但不含删除该文件),如果没有r权限,无法w. x :该文件具有被系统执行的权限.可以删除. 权限对目录: r:re ...
- 修改input中的placeholder属性的颜色
input::-webkit-input-placeholder{ color:#e8e8e8; } input::-moz-placeholder{ /* Mozilla Firefox 19+ * ...
- 推荐2本学习java书和PDF
推荐2本学习java书和PDF下载地址 <深入理解Java虚拟机:JVM高级特性与最佳实践>共分为五大部分,围绕内存管理.执行子系统.程序编译与优化.高效并发等核心主题对JVM进行了全面而 ...
- 介绍在JSP中如何使用JavaBeans?
在JSP中使用JavaBean常用的动作有: 1)<jsp:useBean />:用来创建和查找bean对象: 2)<jsp:setProperty />:用来设置bean的属 ...
- XAML实时显示更新插件LiveXAML
XAML实时显示更新插件LiveXAML LiveXAML是Visual Studio的第三方扩展插件.该插件可以从Visual Studio Marketplace下载,也可以从官网下载http: ...
- RxSwift 系列(九)
前言 看完本系列前面几篇之后,估计大家也还是有点懵逼,本系列前八篇也都是参考RxSwift官方文档和一些概念做的解读.上几篇文章概念性的东西有点多,一时也是很难全部记住,大家脑子里面知道有这么个概念就 ...