validate表单校验

最新推荐文章于 2023-11-16 13:34:24 发布

cherish_lailai

最新推荐文章于 2023-11-16 13:34:24 发布

阅读量775

点赞数

分类专栏： jQuery 文章标签： validate 表单校验表单表单校验插件

本文链接：https://blog.csdn.net/lys1695227550/article/details/78028008

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

validate的使用

前面我们使用的是js手写表单校验，在实际使用中，这样太麻烦了，我们可以使用validate插件，帮我们做一些繁琐的事情

入门

下载插件

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

简单试用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<!--validate.js是建立在jquery之上的，先导入jquery的类库-->
	<script type="text/javascript" src="js/jquery.validate.min.js"></script>
	<!--引入国际化js文件-->
	<script type="text/javascript" src="js/messages_zh.js"></script>
	<script>
		$(function() {
			$("#form").validate({
				rules: {
					username: {
						required: true,
						minlength: 3
					},
					password: {
						required: true,
						minlength: 3,
						digits:true  //必须数字
					}
				},
				messages: {
					username: {
						required: "不能为空",
						minlength: "3位以上"
						
					},
					password: {
						required: true,
						minlength: "3位以上",
						digits:"密码必须是整数!"
					}
				}
			});
		});
	</script>

	<body>
		<form action="#" id="form">
			用户名：<input type="text" name="username" /><br /> 密码：
			<input type="password" name="password" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>

</html>

上文的demo就是一个入门实例，我针对我学习它中遇到的坑，做一些描述，帮助初学者少走一些根本没意义的弯路。

0）调用validate方法的是form表单的jq对象

1）rules和message是写在validate（{ }）的{ }中的

2）rules与message中的逗号，两个校验项之间的逗号（不是；）

3）校验项是文本框中的name属性对应的值

以上注意点，虽说简单，但是在没有报错提示的情况下，它是很难找到的，毕竟它是陌生的。

检验项的默认校验规则：

(1)、required:true               必输字段
(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true                  必须输入正确格式的电子邮件
(4)、url:true                    必须输入正确格式的网址
(5)、date:true                   必须输入正确格式的日期，日期校验ie6出错，慎用
(6)、dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)、number:true                 必须输入合法的数字(负数，小数)
(8)、digits:true                 必须输入整数
(9)、creditcard:true             必须输入合法的信用卡号
(10)、equalTo:"#password"        输入值必须和#password相同
(11)、accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）
(12)、maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)、minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)、rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)、range:[5,10]               输入值必须介于 5 和 10 之间
(16)、max:5                      输入值不能大于5
(17)、min:10                     输入值不能小于10

补充：

1）在message后面可以添加下面这句

//用来创建错误提示信息标签,validate插件默认的就是label

errorElement: "label",

（添加的原因如下图所示）

解决

如果加了errorElement: "label", 的话就可以使用上面加红的指定位置展示提示信息。

2）验证成功可以添加自己的类

success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}

success类如下

label.success{
background:url(../img/checked.gif) no-repeat 10px 3px;
padding-left: 30px;
}

以上是笔者的一些学习记录与心得，请不要当成完整的教学文档来使用，比如自定义校验、国际化什么的，我都未提及。

cherish_lailai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
validate表单校验

validate的使用前面我们使用的是js手写表单校验，在实际使用中，这样太麻烦了，我们可以使用validate插件，帮我们做一些繁琐的事情入门下载插件http://bassistance.de/jquery-plugins/jquery-plugin-validation/简单试用 $(function() {
复制链接

扫一扫