Validate表单验证

validate

一、 validate的使用步骤

引入jquery.min.js
引入 jquery.validate.js
页面加载后对表单进行验证 $("#表单id名").validate({}）
在validate中的rules中编写验证规则（格式如下）
- 字段的name属性:“校验器”（tisps:一个输入框只有一个校验器的时候使用）
- 字段的name属性:{校验器:值,校验器:值}(tips:输入框需要有多个校验器的时候使用)
在validate中的messages中编写提示信息(tips格式与rules相对应)
在validate中的submitHandler中编写验证通过执行的内容

图示如下：

案例代码如下

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="scripts/common/jquery.min.js"></script>
<script type="text/javascript" src="scripts/common/jquery.validate.js"></script
<script type="text/javascript">$("#zhuce").validate({rules:{regist_username:{required:true/* remote:{type: "post",url: url,data:{userName:function () {return $("regist_username").val();}}}用ajax判断数据库中用户名是否存在*/},regist_password:{required:true,minlength:6},final_password:{equalTo:"#regist_password"}},messages:{regist_username:{required:"用户名不能为空"},regist_password:{required:"密码不能为空",minlength:"密码最小的长度为6"},final_password:{equalTo:"两次密码不一致"}},submitHandler: function () {//验证通过后进行注册register();}})</script>
</head>
<body><form id="zhuce"><dl><dt><div class='header'><h3>注&nbsp;册</h3></div></dt><dt></dt><dt><div class='letter'><label for="regist_username">用户名:&nbsp;</label><input type="text" name="regist_username" id="regist_username" tabindex='5'/></div></dt><dt><div class='letter'>昵&nbsp;&nbsp;&nbsp;称:&nbsp;<input type="text" name="nickname" id="nickname" tabindex='6'/></div></dt><dt><div class='letter'><label for="regist_password"> 密&nbsp;&nbsp;&nbsp;码:&nbsp;</label><input type="password" name="regist_password" id="regist_password" tabindex='7'/></div></dt><dt><div class='password'><label for="final_password">&nbsp;&nbsp;&nbsp;确认密码:&nbsp;</label><input type="password" name="final_password" id="final_password" tabindex='8'/></div></dt><dt><div><input type="submit" name="" id="regist_button" value='&nbsp注&nbsp册&nbsp' tabindex='9'/><input type="button" name="" id="back" value='&nbsp返&nbsp回&nbsp' tabindex='10'/></div></dt></dl></form>
</body>
</html>

默认校验规则

序号	校验类型	取值	描述
1	required	true&false	必须填写的字段
2	email	“@”&“email”	必须输入正确格式的电子邮件
3	remote	url路径	使用ajax进行验证
4	date	数字	正确格式日期 tips:ie6有bug
5	dateISO	字符串	正确格式的日期例如：2018-11-28，2018/11/28 tips:只验证格式，不验证有效性
6	number	true&false	合法的数字
7	digits	true&false	整数
8	creditcard	true&false	合法的信用卡号
9	equalTo	JQuery表达式（eg:"#regist_password"）	输入值必须和 #regist_password相同。
11	maxlength	数字	最大长度
12	minlength	数字	最小长度
13	rangelength	[min,max]	输入长度必须在 min和 max之间的字符串（tips:汉字算一个字符）
14	range	[min,max]	输入值必须在 min和 max之间的数字
15	max	:n	最大值不能大于n
16	min	:n	最小值不能小于n

Validate表单验证相关推荐

jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
validate表单验证的用法
正则表达式验证字符串 var value='这是待验证的字符串' var char=/^[\u4e00-\u9fa5]+$/; //稚嫩恶搞输入汉字 console.log(char.test(val ...
Validate 表单验证用法说明
前言 Validate 是 jQuery 的一个子插件, 该插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足用户的各种验证需求.该插件捆绑了一套有用的验证方法 ...
jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
Laravel POST请求API接口使用validate表单验证返回欢迎页
突然遇到的问题就是使用Laravel进行开发API接口的时候发现在表单验证不通过的时候返回了登录页猜测问题应该是因为表单验证失败后进行了重定向导致的因为返回状态码200 网上找了好久没找到 ...
jQuery validate 表单验证，涵盖各种类型数据
本来觉得用这个会很难,结果试了试,发现却是简单了不少东西啊,什么getElementById,if 什么的,只用几个属性名什么的就可以解决不同状态显示不同提示,很强大很方便. <%@ page ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
jQuery validate表单验证demo
Query Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 官方文档 http://jqueryvalidation. ...
jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...

Validate表单验证

validate

Validate表单验证相关推荐

最新文章

热门文章